Equal height cols with a flexible width, padding between the boxes, rounded corners, dropshadows and flexible background-colors

Resize your browser window to see the effect

This page uses one background image and CSS. Works in browsers. You will need some javascript to make it work in IE6 and probably Opera though

See the article with some explanation

First col

We'll give this col a different height than it's sibling cols.

We'll give this col a different height than it's sibling cols.

Second col

We'll give this col a different height than it's sibling cols.

We'll give this col a different height than it's sibling cols.

We'll give this col a different height than it's sibling cols.

Second col

We'll give this col a different height than it's sibling cols.

Last col

We'll give this col a different height than it's sibling cols.

We'll give this col a different height than it's sibling cols.

  1. Equal height cols with a flexible width
  2. Equal height cols with a flexible width, a border and padding between the boxes
  3. Equal height cols with a flexible width, padding between the boxes, rounded corners, dropshadows and flexible background-colors