CODEWITHSUNDEEP
htmlcss
CLiown
CLiown

Reputation: 13853

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

Upvotes: 2

Views: 9493

Answers (7)

Raver0124
Raver0124

Reputation: 522

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/

Upvotes: 0

Arjan Einbu
Arjan Einbu

Reputation: 13692

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/

Upvotes: 5

ttloughlin
ttloughlin

Reputation: 1

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/

Upvotes: 0

GaryP
GaryP

Reputation: 2173

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.

Upvotes: 0

Abhimanyu
Abhimanyu

Reputation: 57

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/

Upvotes: -2

jabbink
jabbink

Reputation: 1291

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

Upvotes: 2

Matheno
Matheno

Reputation: 4162

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

Upvotes: 1

Related Questions