CSS side by side div's auto equal widths

Question

<div id="wrapper" style="width:90%;height:100px;background-color:Gray;">     <div id="one" style="height:100px;background-color:Green;float:left;"></div>     <div id="two" style="height:100px;background-color:blue;float:left;"></div>     <div id="three" style="height:100px;background-color:Red;float:left;"></div> </div> 

I have a parent div which will contain 2 or 3 child divs. I want child divs to take equal widths automatically.

Thank You

Answer 1

It's not impossible. It's not even particularly hard, with the use of display: table.

This solution will work in modern browsers. It won't work in IE7.

http://jsfiddle.net/g4dGz/ (three divs)
http://jsfiddle.net/g4dGz/1/ (two divs)

CSS:

#wrapper {     display: table;     table-layout: fixed;      width:90%;     height:100px;     background-color:Gray; } #wrapper div {     display: table-cell;     height:100px; } 

HTML:

<div id="wrapper">     <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>     <div id="two">two two two two two two</div>     <div id="three">three</div> </div>