Marwan AK Marwan AK - 3 years ago 67
CSS Question

divs have different heights

I'm working with boostrap and I have a row with 3 columns inside with pictures inside the columns I set the

width
and
height
for pictures to
100%
and I'm getting different sizes for each column even though all the original pictures have the same width and height



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row special-row" style="box-sizing: border-box;">
<div class="col-md-12 intrinstic" style="margin-bottom:1%;"><img src="src" />
</div>
<!-- /top-pic -->

<div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

<div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

<div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

<div class="col-md-6"><img alt="earring" src="src" style="max-height:100%; max-width:100%" /></div>

<div class="col-md-6"><img alt="earring" src="src" style="max-height:100%; max-width:100%" /></div>

<div class="col-md-12 intrinstic" style="margin-top:1%;"><img src="src" /></div>
</div>

<div class="row">
<div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>
<div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>
<div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>

</div>
</div>





My problem is with the last 3 columns having different heights.

EDIT: I'm working with drupal so this code lives inside a bootstrap div with class
container
. Thanks.

Answer Source

You need to remove width: 100% for the images and the columns will be equal in height. Fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download