Contain sidebar heights with Header and Footer

[rayw]

Hi, I am trying to do something similar to contained floats. I have a container with a header and footer, and in between the header and footer are divs for a left sidebar, content area and a right sidebar. So the issue is that the left and right sidebar have heights of 100% with repeating backgrounds, but in the case that the page is short, the sidebars extend beyond/below the footer.

The structure/layout of the page is as follows:

<div id=container>
<div id=header></div>
<div id=leftbar></div>
<div id=content></div>
<div id=rightbar></div>
<div id=footer></div>
</div>

I'm not sure how to clear, or hide the sidebars when they extend beyond the footer. Any ideas?

Thanks.

[Xapti]

Well you could add the style clear:both on the footer... that pushes the footer below the sidebars... is that what you want, or something else?

And may I ask why you have a container div around your whole page? Why don't you just use the body tag? (there may be good reasons, I'd just like to know)

[rayw]

Hmm, I'm not sure if what I'm trying to do is even possible without using a hack.

Xapti: no reason for using a container, originally i thought it might help with constraining the height. I also tried using clear:both in the footer, with no success (see below).

Here are the pertinent styles I've been tweaking. I'm sure there is a better way to set this up, so any help is greatly appreciated. Oh, and I am using a strict doctype declaration.

#container{
position:absolute;
top:0px;
left:0px;
height:100%;
}
#header{
position:relative;
width:800px;
height:150px;
}
#footer{
position:relative;
width:800px;
height:50px;
clear:both; /*? */
}
#leftbar{
background-image:url(repeat_img.jpg);
background-repeat:repeat-y;
position:absolute;
top:150px; /* position below header */
left:0px;
width:150px;
height:100%;
}
#rightbar{
background-image:url(repeat_img.jpg);
background-repeat:repeat-y;
position:absolute;
right:0px;
top:150px;
width:150px;
height:100%;
}
#content{
position:relative;
top:0px;
margin-left:150;
margin-right:150px;
}