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

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 clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

<div style="overflow: hidden">_x000D_
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">_x000D_
        Some content!<br/>_x000D_
        Some content!<br/>_x000D_
        Some content!<br/>_x000D_
        Some content!<br/>_x000D_
        Some content!<br/>_x000D_
    </div>_x000D_
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">_x000D_
        Some content!_x000D_
    </div>_x000D_
</div>

I know its been a long time but I share my solution anyway. This is a jQuery trick.

--- HTML

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>

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{_x000D_
  position: relative;_x000D_
  width: 200px;_x000D_
}_x000D_
.wrapper:before,_x000D_
.wrapper:after{_x000D_
  content: "";_x000D_
  display: block;_x000D_
  height: 100%;_x000D_
  width: 40%;_x000D_
  border: 2px solid blue;_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
}_x000D_
.wrapper:before{_x000D_
  left: 0;_x000D_
  background-color: red;_x000D_
}_x000D_
.wrapper:after{_x000D_
  right: 0;_x000D_
  background-color: green;_x000D_
}_x000D_
_x000D_
.div1, .div2{_x000D_
  width: 40%;_x000D_
  display: inline-block;_x000D_
  position: relative;_x000D_
  z-index: 1;_x000D_
}_x000D_
.div1{_x000D_
  margin-right: 20%;_x000D_
}

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

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;
}

This is an area where CSS has never really had any solutions — you’re down to using <table> tags (or faking them using the CSS display:table* values), as that’s the only place where a “keep a bunch of elements the same height” was implemented.

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique: http://24ways.org/2008/absolute-columns/

In my opinion, it is far superior to both Faux Columns and One True Layout's technique.

The general idea is that an element with position: absolute; will position against the nearest parent element that has position: relative;. You then stretch a column to fill 100% height by assigning both a top: 0px; and bottom: 0px; (or whatever pixels/percentages you actually need.) Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

I just wanted to add to the great Flexbox solution described by Pavlo, that, in my case, I had two lists/columns of data that I wanted to display side-by-side with just a little spacing between, horizontally-centered inside an enclosing div. By nesting another div within the first (leftmost) flex:1 div and floating it right, I got just what I wanted. I couldn't find any other way to do this with consistent success at all viewport widths:

<div style="display:flex">
    <div style="flex:1;padding-right:15px">
        <div style="float:right">
            [My Left-hand list of stuff]
        </div>
    </div>

    <div style="flex:1;padding-left:15px">
            [My Right-hand list of stuff]
    </div>
</div>

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 {_x000D_
    overflow: hidden;_x000D_
}_x000D_
.column {_x000D_
    float: left;_x000D_
    margin: 20px;_x000D_
    background-color: grey;_x000D_
    padding-bottom: 100%;_x000D_
    margin-bottom: -100%;_x000D_
}

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

I recently came across this and didn't really like the solutions so I tried experimenting.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

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.

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.

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

    });

Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

This is a jQuery plugin which sets the equal height for all elements on the same row(by checking the element's offset.top). So if your jQuery array contains elements from more than one row(different offset.top), each row will have a separated height, based on element with maximum height on that row.

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

You'll need to include jQuery

You could use Faux Columns.

Basically it uses a background image in a containing DIV to simulate the two equal-height-DIVs. Using this technique also allowes you to add shadows, rounded corners, custom borders or other funky patterns to your containers.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

The CSS grid way

The modern way of doing this (which also avoids having to declare a <div class="row"></div>-wrapper around every two items) would be to make use of a CSS grid. This also gives you easy control on the gaps between your item rows/columns.

.grid-container {_x000D_
  display: grid;_x000D_
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */_x000D_
  grid-row-gap: 10px; _x000D_
  grid-column-gap: 10px;_x000D_
}_x000D_
_x000D_
.grid-item {_x000D_
  background-color: #f8f8f8;_x000D_
  box-shadow: 0 0 3px #666;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
.grid-item img {_x000D_
  max-width: 100%;_x000D_
}

<div class="grid-container">_x000D_
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>_x000D_
  <div class="grid-item">2</div>_x000D_
  <div class="grid-item">3_x000D_
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />_x000D_
    3.1_x000D_
  </div>_x000D_
  <div class="grid-item">4</div>_x000D_
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>_x000D_
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />_x000D_
    6.1</div>_x000D_
  <div class="grid-item">7</div>_x000D_
  <div class="grid-item">8</div>_x000D_
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>_x000D_
  <div class="grid-item">10</div>_x000D_
  <div class="grid-item">11_x000D_
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />_x000D_
    11.1_x000D_
  </div>_x000D_
  <div class="grid-item">12</div>_x000D_
</div>

The Fiddle

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

You can call this function on page ready event

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

I hope this works for you.

Using jQuery

Using jQuery, you can do it in a super simple one-line-script.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

Using CSS

This is a bit more interesting. The technique is called Faux Columns. More or less you don't actually set the actual height to be the same, but you rig up some graphical elements so they look the same height.

Using CSS Flexbox and min-height worked for me

Say you have a container with two divs inside and you want those two divs to have the same height.

You would set 'display: flex' on the container as well as 'align-items: stretch'

Then just give the child divs a 'min-height' of 100%

See the code below

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}

<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>