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.


    
        Some content!
        Some content!
        Some content!
        Some content!
        Some content!
    

    
        Some content!
    

</div>

How did you put them "side by side"? Using float?
– MvanGeest
Jun 8 '10 at 13:41

float

Do you want that if one of them is getting bigger, than the other one will stay the same height size?
– Wai Wong
Jun 8 '10 at 13:45

A example that is not a solution but is in an editable environment can be found here: jsfiddle.net/PCJUQ
– MvanGeest
Jun 8 '10 at 13:55

20 Answers
20

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


  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  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>

Prefixes may be required for older browsers, see browser support.

flexbox worked like a charm. If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.
– Nick Zulu
Dec 30 '13 at 2:10

@NickZulu I believe in this case you should set flex-direction: column: jsfiddle.net/sdsgW/1
– Pavlo
Dec 30 '13 at 9:42

flex-direction: column

@Eckstein it is not required for both solutions. See demos.
– Pavlo
Oct 7 '14 at 5:51

@IamFace isn't this exactly what answer says?
– Pavlo
Nov 5 '15 at 21:20

this wasn't working for me until I added height:100%; to the children columns
– Jacob Raccuia
Jun 21 '16 at 4:10

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.

padding-bottom: 100%

margin-bottom: -100%

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



    
        Some content!
        Some content!
        Some content!
        Some content!
        Some content!
    


    
        Something
    


</div>

Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!
– NibblyPig
Jun 8 '10 at 14:15

This doesn't seem to work in old IE browsers (yes, unfortunately I still have to support IE6). Any way to make this compatible?
– strongriley
Mar 20 '12 at 14:39

@strongriley Checkout Ed Eliot's blog: ejeliot.com/blog/61 It should work in IE6. Maybe the problem is caused elsewhere?
– mqchen
Mar 22 '12 at 8:47

This breaks if the window is too narrow and the divs are placed beneath each other.
– WhyNotHugo
Aug 17 '13 at 5:13

The container should have an overflow: hidden; property.
– tsega
Aug 10 '15 at 21:54

overflow: hidden;

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.

<table>

display:table*



    
        Some content!
        Some content!
        Some content!
        Some content!
        Some content!
    


    
        Some content!
    


</div>

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

This solution is not available to those who need to support IE6/IE7, but I believe it's the cleanest.
– twsaef
Jun 21 '12 at 6:40

this answer is PERFECT! just a small reminder: it might happen that some client requires "table" instead of "table-row"
– tiborka
Feb 19 '13 at 0:51

@user2025810: aw, thank you. Do you know which clients require table instead of table-row?
– Paul D. Waite
Feb 19 '13 at 1:17

table

table-row

@user2025810: yikes, can't say I've ever tested in that :) Good to know though, cheers. (Given its PDF focus I bet it supports some of the print-related features of CSS 2.1 that aren't implemented very well in browsers.)
– Paul D. Waite
Feb 19 '13 at 17:02

With this solution - forget about using percentage width for your divs, unless you add display: table on the parent element, which will mess things up.
– Alex G
Aug 27 '13 at 13:57

width

display: table

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

// HTML






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

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.

I think using JavaScript is a very good method. The problem is - it falls apart if disabled. I think I will use this anyway and build the best contingency I can ;--) Thanks!
– nicorellius
Jul 2 '12 at 4:50

This implies that columnOne'S height is always bigger than columnTwo.
– Sébastien Richer
Apr 12 '14 at 14:32

You should compare height of columns before applying the height for them. I think js is the best method for this problem, almost all browsers are js enabled, if not, they should get out of your website and many other websites.
– SalmanShariati
Dec 25 '14 at 12:44

This will also only work when the page is first loaded. If the window is then resized, causing the divs to resize then they will not stay in sync
– davesol
Apr 29 '15 at 14:05

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:

position: absolute;

position: relative;

top: 0px;

bottom: 0px;

<!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>


      
        
          Foo

          Bar

          Baz

        

      

      
        Lorem ipsum
      

    </div>
  </body>
</html>

If the right column has more lines than the left, content is overflow.
– David
Feb 12 '14 at 9:06

@David. You can switch the left and the right.
– Mad Physicist
Jan 7 '15 at 6:20

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/

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.

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


    
        Content in here
    

</div>


    
        More content in here
    

</div>

I used outerHeight to include padding and borders. This is the cleanest solution I think.
– Sébastien Richer
Apr 12 '14 at 14:35

Perfect solution I was looking for. Other solutions are good for case that a row has a few columns but this approach is better for complex html content. Small adding: When document resize in responsive page, content height doesn't change because of fixed. So, I added $('.inner').css({ height: "initial" }); before 'each function' to set height to default.
– bafsar
Mar 5 '17 at 7:10

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

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

flex-direction: row

align-items: stretch

The accepted answer uses flexbox already.
– TylerH
Nov 18 '16 at 19:38

@TylerH But asked has edited his question and added

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.

which is not mentioned in the accepted answer...I just made a completion here. Maybe I should have commented it on the accepted answer?
– Hegwin
Nov 22 '16 at 2:30

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.

it's not mentioned explicitly because it's covered already by the simple CSS declaration already. Open up the answer's Snippet in fullscreen and resize your browser window to see; they stay the same size as each other.
– TylerH
Nov 26 '16 at 4:34

Even if the accepted answer uses flexbox, this one has a different approach. align-items: stretch is what set me on the path to solving my problem in a very particular situation.
– BenoitLussier
Jun 13 at 0:20

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

div

Fiddle

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

div

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

div

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

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

pseudo elements

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


  Content Content Content Content Content Content Content Content Content
  
Other

</div>

The Fiddle

HTML



    

    


    
        Hello Kitty!

        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!

        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!

    


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

The CSS grid way

The modern way of doing this (which also avoids having to declare a

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

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


    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.


   
    Lorem ipsum dolor sit amet.

You'll need to include jQuery

This will not work if both the

have dynamic content. The reason I say is if

have more content that the other problem arises.
– Viswalinga Surya S
Jan 17 '13 at 18:10

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

--- HTML


    
        asd
        asd
        asd
    

    
        asd
    

</div>


    
        asd
    

    
        asd
        asd
        asd
    

</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

http://js/jquery.min.js $(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()); });

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

};

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

Please supply any commentary to your answer.
– sgnsajgon
Jul 5 '13 at 22:30

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.

...as jquery is being removed from most web applications nowadays. Times are changing...
– connexo
Jun 29 at 14:27

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

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





Some content!
Some content!
Some content!
Some content!
Some content!





Some content!



</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

The OP wanted the divs to always have the same height.
– Simon Forsberg
May 14 '12 at 11:16

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Search This Blog

Mgiyuk