html - Floating Divs, adjust height to the bigger one -
my problem:
i want make floated divs adapt height
bigger one. tried many things setting height of .item
100% didn't work.
do have set .row
display table or there other solution such simple problem? help.
.item { background-color: lightblue; padding-bottom: 25px; } .left { float: left; } .right { float: right; margin-left: 50px; }
<div class="row"> <div class="item left"> <img src="http://lorempixel.com/400/400"" /> </div> <div class="item right"> <img src="http://lorempixel.com/400/200"" /> </div> <div style="clear: both;"></div> </div>
please ignore lorempixel images, included them demonstrating problem
i don't think can achieve using css on floated elements. achievable jquery.
basically, uses paul irish's max height snippet.
$.fn.setalltomaxheight = function(){ return this.height( math.max.apply(this, $.map( , function(e){ return $(e).height() }) ) ); } $('.item').setalltomaxheight();
Comments
Post a Comment