CSS side by side div's auto equal widths

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

Solution 2:

in modern browsers, you can use flexbox

three divs example

two divs example

CSS:

#wrapper {
    display: flex;    
    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    flex-basis: 100%;
}

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>