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.

here's fiddle

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

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -