CSS side by side div's auto equal widths
HtmlCssHtml Problem Overview
<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
Html Solutions
Solution 1 - Html
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 - Html
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>
Solution 3 - Html
Have you tried using width:33%?
Solution 4 - Html
For the sake of older browser compatibility, here's a solution that works.
html:
<div class="parent">
<div></div>
<div></div>
<div></div>
</div>
css:
.parent{
height: 200px;
background: #f00;
}
.parent > div{
width: calc(100%/3);
height: 100%;
float: left;
background: #fff;
}
However, to make it dynamic, since you'd know if it'd be 2 or 3 columns, you can put the count in a variable and do internal / inline css:
//$count = 2 or 3
Internal CSS (recommended)
...
<style>
.parent > div{
width: calc(100%/<?=$count;?>);
}
</style>
<body>
...
Inline CSS:
<div class="parent">
<div style="calc(100%/<?=$count;?>)"></div>
<div style="calc(100%/<?=$count;?>)"></div>
<div style="calc(100%/<?=$count;?>)"></div>
</div>
Solution 5 - Html
.wrapper > div {
width: 33.3%;
}
This doesn't work in IE <= 6, so you would better add some common class to child divs and create a CSS-rule for it.