Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

<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 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>
                +1 in addition, check this useful link with a comprehensive list of flexbox features css-tricks.com/snippets/css/a-guide-to-flexbox
– Tivie
                Feb 25, 2014 at 7:47
                @RokoC.Buljan Nope. At least not in Safari 9. Open up the demo and try this: if I set the width to be 100% the third column become larger than the first two.
– Pavlo
                Oct 28, 2015 at 17:23
                @Pavlo I've seen the issue in Safari(5). Incredible. Makes totally no logical sense why would the second cell be so narrow... Who's building those browsers? Removed my previous comment to prevent noise. Thanks for the response. Up+d.
– Roko C. Buljan
                Oct 28, 2015 at 21:58
Give overflow: hidden to the container and large (and equal) negative margin and positive padding to columns. Note that this method has some problems, e.g. anchor links won't work within your layout.
Markup
<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
.container {
    overflow: hidden;
.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
The Result
                I just tested and it seems you can! Pretty cool, the only thing negative I can point out is the blue background, I think I need glasses... The text is just so fuzzy.
– Alix Axel
                Jan 20, 2012 at 20:53
                @Alix: If blue background is horrible for a code sample, you can read full Lorem ipsum here :-)
– Dan Abramov
                Jan 20, 2012 at 21:29
                that doesn't make them equal height. that only makes the BACKGROUND to look like equal height, but the containers aren't..
– vsync
                Dec 26, 2012 at 21:48
                @vsync: True, but it's often the desired result and is much less hurdle than other methods.
– Dan Abramov
                Dec 26, 2012 at 22:16
                I would really like to know when actually being equal height is the right problem to be solving, because if there was equal content there would be equal height, and putting stuff at the bottom will work with relative positioning to the container element.   This answer is what I was looking for when I cam here, so cheers.
– Adam Tolley
                Mar 8, 2013 at 20:44
Here is the completed CSS the article uses. It is well worth reading the entire article, as the author goes step by step into what you need to make this work.
#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
This isn't the only method for doing it, but this is probably the most elegant method I've encountered.
There is another site that is done completely in this manner, viewing the source will allow you to see how they did it.
                none of this makes the height of the columns the same, it's just an Illusion. what i really want to know if how to make them the same height without JS.
– vsync
                Dec 26, 2012 at 21:49
                @vsync: If you want to make them the same height, make them the same height. For most layouts the "illusion" is sufficient and acceptable. Html/Css is a limited markup language so there is only so much it can do before you have to rely on another tool.
– Joel Etherton
                Dec 26, 2012 at 22:29
                have you heard about css? "flex-box" or even, display:table..only it's hard to keep support for older IE. but there are ways, always
– vsync
                Dec 27, 2012 at 16:21
$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
function getTallestHeight(elements) {
    var tallest = 0, height;
    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();
        if(height > tallest) 
            tallest = height;
    return tallest;
<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
                @Alix - I know for certain that IE6/7 doesn't support display:table - others have issues if you don't use explicit table, row, and cells (as in, using anonymous elements (digital-web.com/articles/everything_you_know_about_CSS_Is_wrong), etc.)
– K Prime
                Jan 22, 2010 at 6:10
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.element {
  border: 2px solid #000;
Live example is here.
repeat(auto-fit, minmax(200px, 1fr)); part sets columns width. Every column takes 1 fraction of available space, but can't go less than 200px. Instead of shrinking below 200px it wraps below, so it's even responsive. You can also have any number of columns, not just 3. They'll all fit nicely.
If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr); instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout.
More on CSS Grid on MDN or css-tricks.
It's clean, readable, maintainable, flexible and also that simple to use!
You ca try it... it works for me and all browser compatible...
<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
Another option is to use a framework that has this solved. Bootstrap currently doesn't have an equal height option but Foundation by Zurb does, and you can see how it works here: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
Here's an example of how you'd use it:
<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    <div class="large-6 columns panel" data-equalizer-watch>
Basically they use javascript to check for the tallest element and make the others the same height. 
So, if you want just css this would add more code, but if you are already using a framework then they have already solved this. 
Happy coding. 
/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
                Welcome to SO! When you reply to a question with code, try to explain it a little bit. In this case, there are more answer so expose the Pros.
– David García Bodego
                Oct 31, 2019 at 6:44
Responsive answer:
CSS flexbox is cute, but cutting out IE9 users today is a little insane. On our properties as of Aug 1 2015:
3% IE9

2% IE8
Cutting those out is showing 5% a broken page? Crazy.
Using a media query the way Bootstrap does goes back to IE8 as does display: table/table-cell. So:
http://jsfiddle.net/b9chris/bu6Lejw6/
<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
div.col {
    padding: 10px;
div.col1 {
    background: #8ff;
div.col2 {
    background: #8f8;
@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    div.col {
        display: table-cell;
        width: 50%;
I used 400px as the switch between columns and a vertical layout in this case, because jsfiddle panes trend pretty small. Mess with the size of that window  and you'll see the columns nicely rearrange themselves, including stretching to full height when they need to be columns so their background colors don't get cut off part-way down the page. No crazy padding/margin hacks that crash into later tags on the page, and no tossing of 5% of your visitors to the wolves.
Here is an example I just wrote in SASS with changeable column-gap and column amount (variables):
.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
.fauxer {
  overflow: hidden; }
.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }
.fauxer > div > div {
  display: table-row; }
.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }
<div class="fauxer">
                            Lorem column 1
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                            Lorem column 3
                            Lorem column 4
                            Lorem column 5
Note: I only found the time to test it in some new browsers. Please test it well before you will use it :)
The editable example in SCSS you can get here: JSfiddle
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.