How to make divs same height?

Question

I have one parent-div which contains three divs and I would like to make them same height but it is not working. The first and third div contains each an image. The second div contains three divs with content.

Here is the HTML:

<div class="container">
    <div class="column1">
        <img src="http://placehold.it/300x318">
    </div>

    <div class="column2">
        <div class="row1">
            <div class="text">UNIKE GUSTAVIANSKE STILMØBLER.</div>
            <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
            <div class="text">OG 1800-TALLS TRADISJONER.</div>
        </div>
        <div class="row2"></div> 
        <div class="row3">
            <div class="text">
                Åpningstider:<br>
                Man - Fre 11 -17     Lør 11- 15
            </div>
        </div> 
    </div>

    <div class="column3">
        <img src="http://placehold.it/300x318">
    </div>
</div>

The .container has the css-rule display:flex;. When I apply this also to .column1, .column2 and .column3, the layout breaks.

I am trying to achieve that the images height increase and decrease depended to .column2. Unfortunately, I have not the possibility to change the HTML or use JS.

Here you can see a JS-Fiddle. I have commented out the CSS-rules.

Many thanks for your help!

Possible duplicate of [this question](http://stackoverflow.com/questions/39031962/child-divs-height-isnt-the-same-as-parent-div/39032193#39032193). Please check my answer [in this link](http://stackoverflow.com/a/39032193/6386166). Hope this helps :) — Aalind Sharma, Oct 18 '16 at 11:31
the heights of the three `flexbox` children are equal in your code above (because `align-items: stretch` is the default... try adjusting the images, see [a reference here](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) — kukkuz, Oct 18 '16 at 11:44
Your code is correct, see here with backgroundColor: https://jsfiddle.net/pleinx/18mzofbs/15/ or you want to stretch their images inside or centered vertical? — pleinx, Oct 18 '16 at 11:58
@pleinx Yes, I would like them to stretch out so that they cover the space. But they should keep aspect ratio. It is okay if they get hidden under the second column. — dahlsdata-tahira, Oct 18 '16 at 13:50
@dahlsdata-tahira did you try using the `object-fit: cover;` css rule I showed in my answer below. Based on this comment and your question it should work. — user3366016, Oct 18 '16 at 19:26

score 0 · Answer 1 · answered Oct 18 '16 at 11:39

0

In the question you mention that you apply display:flex to .column1, .column2 and .column3.

Instead just apply this to .column1 and .column3 and leave .column2 as display:block.

This should resolve your problem (works in your JS-Fiddle).

answered Oct 18 '16 at 11:39

apb21

31
5

score 0 · Answer 2 · answered Oct 18 '16 at 11:40

You just need to apply a height and max-width to the images. They will distort to fit into the space and make your images look weird. If you choose images that are this dimensions, they will look better.

.container {
  width: 100%;
  display: flex;
}
.container img{
    height: 100%;
    max-width: 100%;
}

.row1 {
  background-color: #fff;
  padding-top: 40px;
}
.row1 .text {
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  font-weight: 300;
}
.row2 {
  height: 150px;
  background-color: #e4e8eb;
}
.row3 {
  background-color: #c7cacf;
  padding: 10px 0px;
}
.row3 .text {
  font-size: 25px;
  text-align: center;
  line-height: 25px;
}

<div class="container">
  <div class="column1">
    <img src="http://placehold.it/300x318">
  </div>

  <div class="column2">
    <div class="row1">
      <div class="text">
        UNIKE GUSTAVIANSKE STILMØBLER.</div>
      <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
      <div class="text">OG 1800-TALLS TRADISJONER.
      </div>
    </div>
    <div class="row2"></div>
    <div class="row3">
      <div class="text">Åpningstider:
        <br>Man - Fre 11 -17 Lør 11- 15</div>
    </div>
  </div>

  <div class="column3">
    <img src="http://placehold.it/300x318">
  </div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:16

If I'm understanding properly you can add this to your styles:

img { 
    display: block; 
    width: 100%; 
    height: 100%;
    object-fit: cover;
}

Your columns are already filling to the parent height. Using the above css styles the images in this will fill the parent div height and basically overflow the width. If you do something else like set height of the images to 100% it will distort the image.

Here is a similar question with same (but more detailed) answer. https://stackoverflow.com/a/26967278/3366016

score 0 · Answer 4 · answered Oct 18 '16 at 11:59

0

you can add this lines for row css

.row {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}

answered Oct 18 '16 at 11:59

Surendra

198
2
13

score 0 · Answer 5 · answered Oct 18 '16 at 12:50

You just need to specify the height and width of image tag.Just add width:100% and height 100% for image tag.

.container {
  width: 100%;
  display: flex;
}
.container img{
    height: 100%;
    max-width: 100%;
}

.row1 {
  background-color: #fff;
  padding-top: 40px;
}
.row1 .text {
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  font-weight: 300;
}
.row2 {
  height: 150px;
  background-color: #e4e8eb;
}
.row3 {
  background-color: #c7cacf;
  padding: 10px 0px;
}
.row3 .text {
  font-size: 25px;
  text-align: center;
  line-height: 25px;
}
.imgsize{
 width: 100%;
 height: 100%;
 }

<div class="container">
  <div class="column1">
    <img src="http://placehold.it/300x318" class="imgsize">
  </div>

  <div class="column2">
    <div class="row1">
      <div class="text">
        UNIKE GUSTAVIANSKE STILMØBLER.</div>
      <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
      <div class="text">OG 1800-TALLS TRADISJONER.
      </div>
    </div>
    <div class="row2"></div>
    <div class="row3">
      <div class="text">Åpningstider:
        <br>Man - Fre 11 -17 Lør 11- 15</div>
    </div>
  </div>

  <div class="column3">
    <img src="http://placehold.it/300x318" class="imgsize">
  </div>
</div>

How to make divs same height?

5 Answers5