Question

Possible Duplicate:
CSS – Equal Height Columns?

I’m not the greatest with css, so my page layout looks like this:

<div style="width:80%;border:1px solid #000;">
    <div style="float:left; width:33.3%; background:#aaa;">one</div>
    <div style="float:left; width:33.3%; background:#bbb;">two</div>
    <div style="float:left; width:33.4%; background:#ccc;">three</div>
    <div style="clear:both;"></div>
</div>

div one has the side links and image

div two holds the main content

div tree has some ads div

now when the main content increases in size the other two stay the same height, so how do I get the height for all 3 divs to increase??

Answer 1

I used this recently for one of my websites.

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

This worked great for me. you may have to reverse engineer the code a little to get your columns to the right widths for you.