How to make divs same height? - html

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!

Answer 1

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).

Answer 2

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>

Answer 3

you can add this lines for row css
.row {
display: flex;
justify-content: center; /* align horizontal */
align-items: center;
}

Answer 4

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>

Answer 5

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