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 div
s)
http://jsfiddle.net/g4dGz/1/ (two div
s)
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>