Make two columns the same height regardless of con

Question

I have a basic grid system, really basic, which puts to 'cells' side by side in a fluid 'row'. I want the two cells to always match their height so they are equal. So if one has more content than the other, the other expands to match the height of the cell with more content.

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

Demo of the problem here: http://jsfiddle.net/QDBff/

Answer 1

I made it work here with the use of jQuery: http://jsfiddle.net/QDBff/10/

$(document).ready(function() {
    var height1 = $('.cell1 > .inner').height();
    var height2 = $('.cell2 > .inner').height();
    if (height1 < height2) {
        $('.cell1 > .inner').height(height2);
    } else {
        $('.cell2 > .inner').height(height1);
    }
});

Answer 2

Change the border from Inner class to Cell1 and Cell2 classes. Then give fixed height to the Cell1 and Cell2 classes.

.cell1 {
width: 45%;
margin-right: 1%;
float: left;
border: 1px solid #CCC;
height:400px; 
}

.cell2 {
width: 45%;
margin-left: 1%;
float: left;
border: 1px solid #CCC;
height:400px;
}

Here is the fiddle http://jsfiddle.net/QDBff/31/

Answer 3

Add a large padding bottom and an equal negative margin bottom to your cells and stick overflow: hidden onto your row.

.cell {
    width: 50%;
    background: #eee;
    float: left;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

.cell:nth-child(odd) { background: #ddd; }

.row { overflow: hidden; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

Example here:

http://jsfiddle.net/Q9U6g/1/

Answer 4

I've checked your fiddle and I think it may be fixed by adding a min-height of 270px (for ex. only).

I am not a jsfiddle user, but look at my screen shot below...

Note:

You just have to tweak your min-height to fit your needs. Tweak is necessary whenever the text size increases or decreases.

But, if your content is dynamic, this is not a permanent solution.

Answer 5

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/

Answer 6

<table><tr><td>Cel 1</td><td>Cel 2</td></tr></table>