2

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/

CLiown
  • 13,665
  • 48
  • 124
  • 205
  • Are the borders necessary? There is a CSS solution but it requires that you don't use borders. – George May 16 '13 at 10:33
  • 2
    Is there any reason not to use a table? I know it's 'Taboo' but that is exactly what they do. – Tom Hubbard May 16 '13 at 10:33
  • Your right, making life harder than it needs to be. Borders are essential DIV layout isn't. – CLiown May 16 '13 at 10:35
  • Then tables it shall be – George May 16 '13 at 10:37
  • When you say cells, we get the wrong picture that you are talking about html table elements like or , but instead you have

    ,

    and

    . Equal height

    cells are different matter. As for equal height columns as they are known - http://css-tricks.com/fluid-width-equal-height-columns/ and http://stackoverflow.com/questions/2114757/css-equal-height-columns
     – Jawad May 16 '13 at 10:50

7 Answers7

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/

Arjan Einbu
  • 13,543
  • 2
  • 56
  • 59
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);
    }
});
jabbink
  • 1,271
  • 1
  • 8
  • 20
1

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

Matheno
  • 4,112
  • 6
  • 36
  • 53
0

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

enter image description here

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.

GaryP
  • 2,173
  • 1
  • 21
  • 28
  • what happens when one column exceeds min-height? – Jawad May 16 '13 at 10:51
  • well actually it's a css based fixed and can apply on a static pages. just as i've mentioned above, on my note. when one or both cells exceeds the min height, it will be uneven again. so you have to tweak your min-height again. – GaryP May 16 '13 at 11:03
0

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/

ttloughlin
  • 1
0

you can achieve this by using

display: table

and

display: table-cell

I have modified your jsfiddle - http://jsfiddle.net/Raver0124/QDBff/36/

Also another jsfiddle that i created previously - http://jsfiddle.net/jBMBR/6/

Raver0124
  • 512
  • 2
  • 9
-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/

Abhimanyu
  • 57
  • 7