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.
Also we can make space between the two divs by adding margin-right to the first div and/or margin-left to the second div. There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS properties (i.e., float, grid, and flex).
width:inherit inherits width that defined by parent. HTML: <div id="parent"> <div id="child"></div> </div> CSS: #parent { width:50%; height:30px; } #child { width:inherit; height:100%; background-color:red; }
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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With