Divide Width of Element Between Child Divs With CSS - css

Question

I have a varying number of inline-block divs that I want to collectively take up 100% of their parent. Can this be done without JavaScript? The only way I can think of is with a table but it's of course bad practice to use a table solely for layout purposes.
|----------------------|
|{ div 1 }{ div 2 }|
or
|{div 1}{div 2}{div 3}|
|----------------------|
I have also tried { display:block; float:left; } but it doesn't seem to make a difference.

Answer 1

You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.
For a structure like this:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
Use this CSS:
div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.
This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.
Let me know if you need more sample code than that!

Answer 2

You can utilize css3 benefits here. I was also facing this issue now i have fixed that using below example code
.parent-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
.child-item {
margin: 5px;
text-align: center;
padding: 10px;
background-color: red;
color: #fff;
}
<ul class="parent-container">
<li class="child-item">1</li>
<li class="child-item">2</li>
<li class="child-item">3</li>
<li class="child-item">4</li>
<li class="child-item">5</li>
<li class="child-item">6</li>
<li class="child-item">7</li>
</ul>
Thanks & Regards,
Lingeshram

Answer 3

The accepted answer missed an important CSS property which is necessary to work:
table-layout: fixed;
This is the correct answer:
HTML:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
</div>
CSS:
div.outer {display:table; table-layout: fixed;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

Answer 4

I'd like to expound on #lingeshram's answer. Flexboxes have come so far that I think it's really the way to do it now. If you have to support old browsers, be sure to check caniuse first.
.container {
display: flex; /* or inline-flex */
}
.col {
flex-grow: 1;
border: 1px solid #000;
}
.col2x {
flex-grow: 2;
border: 1px solid #000;
}
Evenly split three children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
<br>
Evenly split two children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
</div>
<br>
Split three children, but the middle is twice the size of the others
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col2x'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
Here is a pretty good guide to the different ways you can use flexbox.