CSS Height Issue

jack.mitchell · 9 Dec 2011 at 19:20

Good evening everyone! Today I finally got round to starting the design of my new site, however I have hit a snag.

I am using a grid layout and have applied Ryan Faits 'Sticky Footer', everything was going fantastically until I needed to set a fluid height of a div.

If you take a look at my (currently under construction!) site, then I am looking for the white content part to stretch down to the footer with a 20px bottom margin. Now, I can't for the life in me get this thing to stretch and I promise it's not for lack of trying!

If anyone could forward me in the right direction then I would be very grateful. I have tried many container/content div combos with min-height blah blah blah but I just can't get them to work in this particular scenario!

You can see the CSS by viewing source and looking at the link.

Thanks in advance everyone, I've had some cracking advise here before.

The site is http://www.embed.me.uk

8t10 · 9 Dec 2011 at 19:46

With the best possible intentions, you need to start a version 2.

Code:

#page {
  float: left;
  margin-right: 15px;
  width: 825px;
  float: none;
  margin: 0px auto;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -35px; }

It is constantly reassigning, and any browser is likely to end up with a headache. If you sort out the CSS, it may be a lot clearer where the problem lies.

This is what the CSS is actually doing to #main for comparison: (Anything that is above but not here means it is being ignored)

Code:

#page {
  width: 825px;
  min-height: 100%;
  float:none;
  height: auto !important;
  margin-top:0px;
  margin-right:auto;
  margin-left:auto;
  margin-bottom:-35px;
}

100% height is something that is fundamentally tricky, and hacks required to make work using CSS. usually.

One method of achieving this without hacks, is using a box model; by using position absolute, you can take the elements of the page out of 'flow' (which is default) and where ever you tell them.

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html, body { margin:0px; padding:0px; font-family:'Arial'; }

div { position:absolute; }

.container { top:0px; bottom:0px; left:0px; right:0px; }
.page { width:1000px; left:50%; margin-left:-500px; background:#fff; top:0px; bottom:0px; }

.header { top:5px; left:0px; right:0px; height:150px; background:#f07; }
.content { top:160px; bottom:110px; left:0px; right:0px; background:#ff0; }
.footer { bottom:5px; left:0px; right:0px; height:100px; background:#07f; }

</style>
</head>
<body>

<div class="container">
<div class="page">
<div class="header">
Header
</div>

<div class="content">
Notice the bottom:30px made it go 30 pixels from the bottom, because it is position absolute, it listens to the top, left, right and bottom CSS rules.</div>

<div class="footer">
Notice no top:X; given on this, because it needs to sit at the bottom, not a defined place from the top, so it has a height instead.
</div>
</div>
</div>
</body>
</html>

[strikethrough]If you save that code and run it, *hopefully* it will work. I literally just wrote it and totally untested.[/strikethrough]

Tested, and works.

CSS Height Issue

jack.mitchell

jack.mitchell

8t10

8t10