The ol 100% height problem

[Corinthian]

Hi all,

Having a slight problem with my page. It stretches 100% height, but of the browser, not the actual body. I was just starting to think I'd mastered CSS and now this. Please can you show this poor no-nothing where he's going wrong?

http://testwarks.warwickshireonline.com/

Thank you most graciously.

[Excavator]

Hello Corinthian,
I'm not sure why you're trying for a full height layout when you have enough content to fill it way beyone the height of the browser window. Typically a 100% layout is intended to fill the screen when there is very little content.

Here's a demo of what I mean - http://nopeople.com/CSS/full-height-layout/index.html There are examples there, both with and without text, so you can see what it's doing.

Try this instead:*{ margin:0; padding:0; }

html, body {
background: #eeeeee url(images/container_bg.jpg) repeat-x;
font: 0.9em Arial, Helvetica, sans-serif;
color: #666666;
}
#container {
width: 816px;
margin: 0 auto;
overflow: auto;
}
#container #page {
width: 816px;
margin: 0 auto;
background: #fff url(images/page_bg.jpg) repeat-y;
overflow: auto;
}
#container #page #content {
background: url(images/page_bg_topshadow.jpg) no-repeat;
width: 816px;
overflow: auto;
}

#container #page #content #left_column {
float: left;
width: 599px;
margin-left: 8px;
border-right: 1px dotted #ccc;
background: url(images/column_left_bg.jpg) no-repeat;
}
#container #page #content #left_column #title {
padding: 5px 10px;
color: #333333;
}
#container #page #content #left_column #advert {
padding: 5px 10px;
font-size: 0.8em;
text-align: center;
}

#container #page #content #left_column #posts_rss {
padding: 5px;
}
#container #page #content #right_column {
width: 190px;
float: right;
margin-right: 8px;
padding: 5px;
background: url(images/column_right_bg.jpg) no-repeat;
}



#header {
background: url(images/header_bg.jpg);
width: 816px;
height: 75px;
}

Maybe you were doing all that 100% stuff in place of clearing your floats? Have a look at this page about clearing - http://www.quirksmode.org/css/clearing.html

[Corinthian]

Hi Excavator,

Thank you! I will give this a go and report back. The reason I need the 100% height, is that once I've got this layout sorted, I'm going to break it up into includes so I can use it as a template. Some of the other pages I'm making won't have nearly as much content.

Thanks again, will report back soon!

[Excavator]

Well be sure and look at that demo site then. That's a good template for 100% height.

[Corinthian]

Hi Ex,

I've gone with your code, it's looking much better. Thank you ever so much!