How can I create a layout with equal column heights in HTML? - html

Question

I have a problem with my HTML/CSS webpage. I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
But all what I get is a layout in which the areas are only as high as the content is.
Here you can see my website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html I tried several work-arounds, but it does not work.
What's the best way to solve this?

Answer 1

you can use the following code
html
<div id="wrapper">
<div id="left"></div>
<div class="right">start of top</div>
<div class="right">start of bottom</div>
</div>
css
html, body {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
}
#left {
height:100%;
width:50%;
background:#09F;
float:left;
}
.right {
height:50%;
width:50%;
float:left;
background:#69a;
}
live example: http://jsbin.com/idozi4

Answer 2

What you're looking for is an adaptation of the Holy Grail method. In this case, #list1 is the 'left' column (as described in that article) and the rest goes into the 'center' column, so that means you can leave out the 'right' column altogether.
Basically something like:
<div id="container">
<div id="left">
#list 1 contents
</div>
<div id="center">
<div>
#list2
</div>
<div>
#data
</div>
</div>
</div>
#container {
padding-left: 200px; /* LC width */
}
#container > div {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}

Answer 3

Heights will always be tricky... some solutions call for using explicit heights, but then if your content ever gets bigger, it'll overflow and look nasty, or worse, overflow and be inaccessible to the user.
You can use min-heights to display a best-case scenario, in which if the content needs to be taller, the minimum requirement will allow the div to stretch. You can use absolute positioning to get the layout that you want, but then the divs wont be flexible enough to accommodate content. You can use overflow: scroll to allow the divs to act like frames, but that is usually more annoying and messy-looking for the user.
I'd say use the above holy grail method to lay the containers out, and then use min-height for a best case scenario layout.
If none of those solutions are good enough, then there are also plenty of blog posts out there from experts about how to get equal height columns more consistently.

Answer 4

By default, giving something height: 100% will make the item as big as the item that contains it. This works for, say, divs within divs, but not for divs directly within the body tag. For this to work you need to set the height of the body element. Like so.
html, body{
height: 100%;
}
Hope this helps.
Update:
I think you are having trouble because you are trying to do two things which are tricky with CSS: fixed-to-bottom-of-page footers and 100% height. I think you will have to change the way that your footer works in order to get the 100% height working.
I haven't got a complete solution but I have made an example page:
http://deviouschimp.co.uk/misc/stackoverflow/columntest.html
That should sort out your 100% height issues. The footer doesn't always match the bottom of the content (#wrap height:94% gets it close, but it's not perfect).
This sticky footer technique should sort the rest out: http://www.cssstickyfooter.com/
Good luck!