Make Two Columns The Same Height Regardless Of Content

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 mo

Solution 1:

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/

Solution 2:

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

Solution 3:

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

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

Solution 5:

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/