how to control div size when other divs are changing

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??

@Rob what is the advantage of using div over table especial for si=omething which can be easly achieved using table? — Emmanuel N, Jan 16 '12 at 19:33
Don't simply state that tables are not a good idea, explain *why*, and in particular, why it is not a good idea in this particular instance. — dreamlax, Jan 16 '12 at 19:44
@dreamlax Emmanuel N - Another question answered often on the internet and SO and need not/should not be discussed here. — Rob, Jan 16 '12 at 19:47

score 0 · Accepted Answer · answered Jan 16 '12 at 19:21

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.

score -1 · Answer 2 · answered Jan 16 '12 at 19:14

I researched that topic some time ago, and as I remember, there no clear CSS way to do it...at least in CSS 2.0. I found some workarounds like background image, or playing with overflow. For myself, I choose to use java script to make same height all divs that I need.

how to control div size when other divs are changing

2 Answers2