How to make divs of the same height?

Question

I have one parent div that contains three divs , and I would like to make them the same height, but it does not work. The first and third div contain each 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> 

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

I am trying to make the increase and decrease in image height dependent on .column2 . Unfortunately, I have no way to modify HTML or use JS.

Here you can see the JS-Fiddle. I commented on CSS rules.

Many thanks for your help!

Answer 1

In the question, you indicate that you are applying display:flex to .column1 , .column2 and .column3 .

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

This should solve your problem (works in your JS script).

Answer 2

You just need to apply height and maximum width to the images. They will be distorted to fit into the space and make your images weird. If you select images that are of such sizes, 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> 

Answer 3

If I understand correctly, you can add this to your styles:

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

Your columns are already filled to parent height. Using the CSS styles above, the images in this will fill the parent height of the div and basically overflow the width. If you do something else, for example, set the height of the images to 100%, this will distort the image.

Here is a similar question with the same (but more detailed) answer. fooobar.com/questions/50172 / ...

Answer 4

you can add these lines for css line

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

Answer 5

You just need to specify the height and width of the image tag. Just add a width: 100% and a height of 100% for the 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>