same height of columns with 960.gs?

Question

i've got 4 columns in one row and depending on how much information i put in each of them they will have different heights. you can see that if you put a background color on them.

how do i give the other columns the height of the column with the largest height?

Use a table. (ducks and runs away) – Pekka Jan 30 '10 at 16:50 — Pekka, Jan 30 '10 at 16:50

score 4 · Accepted Answer · answered Jan 30 '10 at 16:42

You can use jQuery to do this. http://www.cssnewbie.com/equal-height-columns-with-jquery/

Alternaively for a CSS only approach you can make it look like they are the same height, by wrapping all columns in a div, and then applying a single background image, with 4 blocks of colour that match the column widths.

This wrapper div will expand to be the size of the largest column, and will give the impression of 4 equal sized cols.

score 2 · Answer 2 · answered Jan 30 '10 at 16:48

2

Well, I don't know if this works for 960, but in Blueprint you can get that by applying the following style to the columns:

padding-bottom : 20000px;
margin-bottom : -20000px;
overflow:hidden;

answered Jan 30 '10 at 16:48

Alextronic

491
2
4
11

Hmmm... Does it happen also if, without removing the style proposed above, you try wrapping the columns into a
? You could then try applying a .clearfix class (http://www.webtoolkit.info/css-clearfix.html) Just guessing.
– Alextronic Jan 30 '10 at 18:08

score 2 · Answer 3 · edited Sep 15 '11 at 14:49

2

You could use CSS property display: table-cell

http://jsfiddle.net/AGjBM/

<style>
    div.table-cell {
        display: table-cell;
        border: 1px solid;
    }
</style>

    <div class="table-cell">
        Some Text
    </div>
    <div class="table-cell">
        Some Text<br>
        Some More Text
    </div>

edited Sep 15 '11 at 14:49

Vikrant Chaudhary

11,089
10
53
68

answered Feb 23 '11 at 10:08

gentooboontoo

4,653
3
20
15

same height of columns with 960.gs?

3 Answers3

Linked