Problem with <div> height - Controlling flow from center div

[liliafan]

Hi All

I am hoping someone can help me out since this is driving me nuts.

On my site I have 3 columns:

|sidebar|    content    |sidebar|

What I want to do is have the height of the 2 sidebars controlled by the height of the content. So instead of:

|side|  content   |side|
|    |  content   |___ |
|___ |  content
         content

I have:

|side |  content  |side |
|     |  content  |     |
|     |  content  |     |
|     |  content  |     |

This hasn't been a problem so far I was working with fixed length heights of 700px but now I have content that is getting bigger than the 700px limit and the just looks bad with the side bars not matching the rest of the content.

The site is: www.geekserv.com

If anyone can give pointers I would appreciate it. Please note I don't want to end up using tables or frames this site has to remain 100% xhtml and css.

Thanks in advance for any help.

Ben

[tgreer]

The problem with xhmtl, css, and height, is that percentage heights refer to the percetange of the containing element. The parent element is "body". So, you have to give the body tag a height of 100%, as well as all child tags.

[liliafan]

The problem with xhmtl, css, and height, is that percentage heights refer to the percetange of the containing element. The parent element is "body". So, you have to give the body tag a height of 100%, as well as all child tags.

I was looking at this and experimented with setting:

html,body {
    min-height: 100%;
    height: 100%;
}

However, this seems to only take into account the screen height not the height of the elements contained within the screen.

[tgreer]

Yes, you're right.

You'll have to use JavaScript. Add this in your document head:

<script type="text/javascript">
//<![CDATA[
onload=function() {
document.getElementById('leftbar').style.height=
document.getElementById('rightbar').style.height=
document.getElementById('maincontent').offsetHeight+"px";
}
//]]>
</script>

This makes the style.height of your two side divs equal to the offsetHeight of your main div. It will run automatically "onload" (you don't have to modify your body tag), and will validate as xhtml (the CDATA comment sees to this).

Of course, you should remove the "height: 700px;" statements from your CSS.

[liliafan]

Awesome I will experiment with that, do you know if it is cross browser capable? Or will I need to play with it a little?

Thanks so much for the pointers I will play with it this evening.

Ben

[tgreer]

It should be cross-browser, though I admit I only tested with FireFox. I really don't use IE anymore.

[liliafan]

Worked like a charm I just tested it on my development machine and the height works in both ie and firefox, I had to make a slight alteration to get it looking good on IE.

document.getElementById('leftbar').style.height=
document.getElementById('rightbar').style.height=
(document.getElementById('maincontent').offsetHeight + 10)+"px";

Extra 10px added on and it looks great.

Thank you so much for the help.

Ben