user3550879 user3550879 - 1 month ago 7
CSS Question

matching height of empty div (adjacent)

I am using Bootstrap framework and using the 2 column grid.

html

<div class="col-sm-6">
<?php the_content(); ?>
</div>

<div class="col-sm-6" style="background-image:url('...">
</div>


The content has titles, links, subtitles, and text. Which increases the height of that column. I want the column beside it to match its height (so that the image shows) Without a set height the image doesn't show

Answer

Have your own css as below and add the same along with the row class as below,

HTML

<div class="row row-eq-height">
   <div class="col-sm-6">
      <?php the_content(); ?>
   </div>

   <div class="col-sm-6" style="background-image:url('...">
   </div>
</div>


/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

Reference: http://getbootstrap.com.vn/examples/equal-height-columns/