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 backg开发者_如何转开发round color on them.
how do i give the other columns the height of the column with the largest height?
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.
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;
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>
精彩评论