css3 - How to adjust the height of a series of DIVs by CSS -
in series of divs placed in row float:left (see example)
<div class="row"> <div class="box"> line<br />line<br />line </div> <div class="box"> line </div> <div class="box"> line<br /><br /><br />line<br />line<br /> </div> </div> is possible adjust height of child divs tallest child div, indeed actual height of parent div. in other words, want make height of children equal, without knowing length of content.
i know preferred way use js, curious if possible css only. think should possible considering parent height, defined tallest child.
you put divs in containers. if need div of equal height, containers height of tallest. add bit more complexity it, avoids js, think might want. if not can delete answer.
html
<div class="row"> <div class="container3"> <div class="container2"> <div class="container1"> <div class="box"> line<br />line<br />line </div> <div class="box"> line<br /><br /><br />line<br />line<br />line<br /><br /><br />line<br />line<br /> </div> <div class="box"> line<br /><br /><br />line<br />line<br /> </div> </div> </div> </div> </div> stylesheet
body { margin:0; } .container3 { clear:left; float:left; width:100%; position:relative; right:70%; background-color:red; /* column 3 background color */ } .container2 { clear:left; float:left; width:100%; position:relative; right:10%; background-color:lime; /* column 2 background color */ } .container1 { float:left; width:100%; position:relative; right:10%; background-color:yellow; /* column 1 background color */ } .box { float:left; width:10%; position:relative; left:90%; overflow:hidden; background-color:blue; } there reference here: http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm
and post has similar question: floating divs left, make divs height equal tallest div in it's row?
hopefully helps!
Comments
Post a Comment