How do I keep two columns the same height when reducing the window size?

Question

How do I keep both columns the same height when reducing the window size?

I have two columns with more content on the left one and a single image on the right. When I reduce the screen size the right column becomes shorter... I want them both to always be the same height. How can I do this?

.right-image {
  height: 35vw;
  background-position:center;
  background-size:cover;
  border: 1px solid green;
}

.image-left div {
    background-position: center;
    background-size: cover;
    height: 15vw;
}
.image-left {
    padding: 40px;
    margin-top: auto;
    margin-bottom: auto;
}

.left-col {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.title, .text {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-6 left-col">
      <div class="title">
        <h2>This is a title</h2>
      </div>
      <div class="text">
        <strong>KEEP BOTH COLUMNS THE SAME HEIGHT WHEN RESIZING TO SMALLER SCREEN SIZES</strong> </br>faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
      </div>
      <div class="image-left">
        <div style="background-image:url('https://images.unsplash.com/photo-1496449903678-68ddcb189a24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80')"></div>
      </div>
    </div>
    <div class="col-6 right-image" style="background-image:url('https://images.unsplash.com/photo-1493612276216-ee3925520721?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');">
      
    </div>
  </div>
</div>

So what exactly you require to do with the left column when reducing screen size? To give an internal scroll ? — Abin Thaha, Jul 16 '21 at 04:44
I'd like to keep it as shown, but somehow have the right column match the height. Is this possible? — monsaic123, Jul 16 '21 at 04:45
Either the image height you need to match with the left one, at this point, the image will be stretched. It will lose its original quality/purpose. Or you need to give an internal scroll to the left section matching to the height of the right section — Abin Thaha, Jul 16 '21 at 04:46
Using the right image as a background image shouldn't make it look stretched though? If I could get the height of the column to always match the left side, and then background-size: cover; should prevent it from looking stretched? — monsaic123, Jul 16 '21 at 04:51
@monsaic123 An easy approach for this kind of layout is to use CSS Grid. Look at this: https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout — Rod, Jul 16 '21 at 05:02
For doing that you have to take both the images in a
and then make two "div" in the "div" and then insert the images in the divs. — Atharv kumar, Jul 16 '21 at 07:17

score 0 · Answer 1 · answered Jul 16 '21 at 05:05

This would work as expected. Please check

.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}

.right {
  background-image: url('https://images.unsplash.com/photo-1493612276216-ee3925520721?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');
  background-size: cover;
}

<div class='parent'>
  <div class='left'>KEEP BOTH COLUMNS THE SAME HEIGHT WHEN RESIZING TO SMALLER SCREEN SIZES
faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit
  <h2>Hello world</h2>
</div>
  <div class='right'></div>
</div>

score 0 · Answer 2 · answered Jul 16 '21 at 06:27

I think the only way is to set the height as exact pixel.

.right-image {
  height: 35vw;
  background-position:center;
  background-size:cover;
  border: 1px solid green;
}

.image-left div {
    background-position: center;
    background-size: cover;
    height: 15vw;
}
.image-left {
    padding: 40px;
    margin-top: auto;
    margin-bottom: auto;
}

.left-col {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.title, .text {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-6 left-col" style="height:800px;">
      <div class="title">
        <h2>This is a title</h2>
      </div>
      <div class="text">
        <strong>KEEP BOTH COLUMNS THE SAME HEIGHT WHEN RESIZING TO SMALLER SCREEN SIZES</strong> </br>faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
      </div>
      <div class="image-left" >
        <div class="col-6" style="background-image:url('https://images.unsplash.com/photo-1496449903678-68ddcb189a24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80');"></div>
      </div>
    </div>
    <div class="col-6 right-image" style="background-image:url('https://images.unsplash.com/photo-1493612276216-ee3925520721?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80'); background-size:cover; height:800px;">
      
    </div>
  </div>
</div>

How do I keep two columns the same height when reducing the window size?

2 Answers2