So, I had this problem just now where I had three divs, one #wrap (a container div), a #sidebar and a #main div. Now, the #sidebar div is obviously a sidebar (that in this case resides to the left), the #main div is the right, main, part of the page where the content shows and they are both encapsulated by the wrapper, like this:
<div id="wrap">
<div id="sidebar">
//my sidebar
</div>
<div id="main">
//my content
</div>
</div>
The problem I had was that if the sidebar and content part was shorter than the viewport (browser window) then the page would stop half-way down. Using Faux columns this made the page look very odd and I had no intention to use a footer (which would still look odd), so I decided that I would use the min-height css property. Problem is, IE6 doesn't support it, so out I threw it.
I then decided that it would be a great idea to give the #wrap div 100% height, like this:
This, however, did very little to help me, until I found
this forum thread that touched the subject and helped me out.
The problem is that the #wrap now has a 100% height in relation to nothing which automagically sets it to height:auto, and that's not good, so what you have to do is this:
body{
height: 100%;
}
#wrap{
height: 100%;
}
Ah! There we go, now the body is 100% which means that the wrapper is set to 100% of the body. Sweet!
I am content now.