Tutorial :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?


Solution:1

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.


Solution: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;  


Solution:3

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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »