Equal height for two divs

Question

I have 2 divs (6 columns each). In the div on the left is an image, in the div on the right is some quote. I want my right div's height to be the same as height of image.

Here is my code: http://codepen.io/matysflance/pen/PZXdBK

<div id="testimonials" class="container-fluid testimonials">
    <div class="row">
        <div class="col-lg-6 image">
                <img src="http://placehold.it/1100x700/f3e42a" alt="">
        </div>
        <div class="col-lg-6 quote">
            <blockquote>
                <p>"Integer posuere erat a ante venenatis dapibus posuere veit al..." </p>
                <cite>Susan Sims, Interaction Designer at XYZ</cite>
            </blockquote>
        </div>
    </div>
</div>

score 6 · Answer 1 · answered Feb 11 '16 at 14:58

6

You can do this using jQuery

Just add the class same-height to the DIV´s you want to have the same height

jQUERY

jQuery(document).ready(function($) { //noconflict wrapper
    var heights = $(".same-height").map(function() {
        return $(this).height();
    }).get(),
    maxHeight = Math.max.apply(null, heights);
    $(".same-height").height(maxHeight);
});

answered Feb 11 '16 at 14:58

Luís P. A.

9,524
2
23
36

Worked for me when all solutions did not work. Basically, some core CSS Framework styles were conflicting with Flex and Table Display declarations. – Bululu Apr 23 '18 at 11:29

score 4 · Answer 2 · edited May 23 '17 at 12:00

4

You can make the container of both divs a flexbox, which will automatically apply equal heights to the child elements.

Try this:

.row { display: flex; }

Revised Codepen

By making .row a flex container, the children (.image and .quote) become flex items, and share equal height by default. See here for more details: https://stackoverflow.com/a/33815389/3597276

edited May 23 '17 at 12:00

Community

1
1

answered Feb 11 '16 at 14:58

Michael Benjamin

346,931
104
581
701

score 2 · Answer 3 · answered Feb 11 '16 at 14:58

2

use jQuery or plain Java Script. Just take the height of the desired element and set it to the one you need to edit. $( ".col-lg-6 quote" ).height($( ".col-lg-6 image" ).height())

Hope it helps.

answered Feb 11 '16 at 14:58

Martin Apostolov

35
6

score 1 · Answer 4 · answered Feb 11 '16 at 15:06

Simply:

    var heightImgDiv = $('.ImgDiv').height();
    $('.Div').height(heightImgDiv );

div {
    background: red;
    float: left;
    width: 250px;
    margin: 0 10px 0 10px;
}

img {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ImgDiv"><img src="https://fallbacks.carbonads.com/nosvn/fallbacks/4cd1acdff7348a672d30bb3326800d80.jpeg"/></div>
<div class="Div"></div>

score 1 · Answer 5 · edited May 23 '17 at 12:16

A similar question has been answered here

For your convenience I will write the answer here also.

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Table layout

If you still need to support IE 8 or 9, then you have to use table layout:

.row {
  display: table;
}

.col {
  display: table-cell;
  width: 50%; /* depends on the number of columns */

  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Equal height for two divs

5 Answers5

Linked