Make Two Columns the Same Height

How do I keep two side-by-side div elements the same height?

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>

Make two columns the same height using Flexbox

You can simply remove align-items: center from your .block-marketing selector and add height: 100% to the image:

I've forked and updated your codepen:
https://codepen.io/anon/pen/QrbzXz

Make 2 columns the same height with flexbox

Update answer: As I understand, what you want is the height of 100vh for the .wrapper, which has 2 columns inside it. And everywhen one of each column getting too long (longer than 100vh), its behavior becomes scroll instead of make its parent scroll. Here's the code after refining, give it a look to see if that's what you want. What I do are:

• .wrapper has a specific height of 100vh
• each column inside .wrapper has the max-height: 100%
• When the column's content height getting longer than .wrapper's height, its behavior becomes scroll, by overflow-y: auto.

You can read more about overflow at here to see what's the difference between overflow: auto, overflow: scroll and overflow: visible (default), which I have struggled while seeking for this answer).

body {

  margin: 0;

  padding: 0;

}

.wrapper {

  display: flex;

  height: 100vh;

}

.col {

  outline: 1px green solid;

  max-height: 100%;

  overflow-y: auto;

  width: 120px;

}

<div class="wrapper">

  <div class="col">... little content... </div>

  <div class="col">..Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.... </div>

</div>

Make two columns the same height regardless of content

If you absolutly must avoid using TABLEs, you can style your divs to behave like tables with

display: table;
display: table-row;
display: table-cell;

You can look at the markup/css and results in this fiddle: http://jsfiddle.net/aeinbu/QDBff/35/

How to keep two columns the same height with image?

You need to apply max-width:100% on your image. Now even after applying the following style your image will not take whole place in full screen(1600*900px), this is happening because your original image is of less size(450*274) and the container where your are trying to fit is 792px approx. Try using a bigger image then it will be solved.

.flex__wrapper {

  display: flex;

  position: relative;

  background-color: #eee;

  flex-wrap: wrap;

}

@media screen and (min-width: 1024px) {

  .flex__wrapper {

    max-width: 56%;

   }

}

[class*=col--] {

  box-sizing: border-box;

  flex-basis: 0;

    flex-grow: 1;

    max-width: 100%;

}

.col--m-s-12 {

  width: 100%;

}

.col--t-s-6 {

  width: 50%;

}

img {

  height: 100%;

  width: 100%;

  object-fit:cover;

}

<div class="flex__wrapper">

  <div class="col--m-s-12 col--t-s-6" style="border:solid 1px;">

   <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg" class="img-fluid">

  </div>

  <div class="col--m-s-12 col--t-s-6">

    <div>Distinctively engineer timely benefits before leading-edge technology. </div>

    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive

      applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships. Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without

      market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards

      in e-tailers.</div>

  </div>

</div>

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

How can I make a two-column layout have equal height columns with one scrollable?

Since the width is known you can consider position:absolute for the content so it doesn't affect the height and simply stretch it using top:0;bottom:0;

.gridwrapper {

  display: grid;

  grid-template-columns: 0.5fr 1.5fr;

  grid-auto-rows: 200px;

  grid-gap: 10px;

  grid-template-rows: auto;

}

.column {

  background: green;

  position:relative;

}

.dynamic-content {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 300px;

  background: pink;

  margin: 20px;

}

.list {

  position:absolute;

  overflow-y: auto;

  margin: 20px;

  top:0;

  bottom:0;

  left:0;

  right:0;

}

.item {

  height: 50px;

  background: yellow;

  border: 2px solid black;

}

<div class="gridwrapper">

      <div class="column">

        <div class="list">

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

          <div class="item"></div>

        </div>

  </div>

  <div class="column">

    <div class="dynamic-content">Some dynamic content with random height</div>

  </div>

</div>

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {

  display: grid;

  grid-auto-flow: column;

  gap: 5%;

}

.col {

  border: solid;

}

<div class="row">

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>

</div>

---

Related Topics