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

Question

I have two divs side by side. I\'d like the height of them to be the same, and stay the same if one of them resizes. I can\'t figure this one out though. Ideas?

To c

Answer 1

This is a common problem which many have encountered, but luckily some smart minds like Ed Eliot's on his blog have posted their solutions online.

Basically what you do is make both divs/columns very tall by adding a padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100%. It is better explained by Ed Eliot on his blog, which also includes many examples.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

Answer 2

    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });

Answer 3

This question was asked 6 years ago, but it's still worthy to give a simple answer with flexbox layout nowadays.

Just add the following CSS to the father <div>, it will work.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

The first two lines declare it will be displayed as flexbox. And flex-direction: row tells browsers that its children will be display in columns. And align-items: stretch will meet the requirement that all the children elements will stretch to the same height it one of them become higher.

Answer 4

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}

Answer 5

I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.

With these approach you can set margins between columns, borders, etc.

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

Answer 6

I have tried almost all the mentioned methods above, but the flexbox solution won't work correctly with Safari, and the grid layout methods won't work correctly with older versions of IE.

This solution fits all screens and is cross-browser compatible:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

The above method will equal cells height, and for the smaller screens like mobile or tablet, we can use the @media method mentioned above.