CSS variable height columns

[Timo Jeranko]

I would like to create a container div around several columns. The
height of the container should automatically adjust to match the
height of the longest column. The height of the columns should adjust
according to the content that has been entered. Any idea how the
above can be achieved using CSS? Help much appreciated.

 

[Nik Coughlin]

I would like to create a container div around several columns. The
height of the container should automatically adjust to match the
height of the longest column. The height of the columns should adjust
according to the content that has been entered. Any idea how the
above can be achieved using CSS? Help much appreciated.

1. display-table - not supported in IE prior to version 8, can be worked
around with JavaScript (similar to the technique used in the next example)
2. using a combination of CSS positioning and z-index, see:

http://www.nrkn.com/3ColEqualPositioned/

Note that the above also requires JavaScript in the form of CSS expressions
to work with IE < 8. Although the dimensions in the example are all
specified in px I succesfully use this technique with em all the time.

The same technique can also be used to graphically skin elements, similar to
using multiple backgrounds in CSS3, but in a more flexible manner, see:

http://www.nrkn.com/skinning/

 

[Nico Schuyt]

Timo Jeranko wrote :

I would like to create a container div around several columns. The
height of the container should automatically adjust to match the
height of the longest column. The height of the columns should adjust
according to the content that has been entered. Any idea how the
above can be achieved using CSS?

No CSS, simply use a table

 

[Nico Schuyt]

dorayme wrote :

It depends on what is meant and required. If OP wants coloured full
length columns then yes, a table is best

Maybe a solution like http://www.html.it/articoli/niftycube/nifty9.html as
an alternative.

...if he is not prepared to
study all the pitfalls and tricks needed to do this cross browser.
Without coloured backgrounds, the task can be attacked with simpler
weapons. Without borders, it is even easier.

I'm not sure a stable solution is possible. Maybe with some text but if
larger elements are applied (pictures, wide table) I think it will collapse.
I even had a problem with a simple 2-column layout like
http://www.nicoschuyt.nl/test/col_test.htm (narrow the screen and the table
and right column are overlaying each other)
A solution like http://www.nicoschuyt.nl/test/col_test_relative_wd.htm was
better but failed finally with more elements.

But if you are new to
CSS, and you want the lot, use a table for serious work and play with
the alternatives in your spare time.

I prefer to go fishing in my spare time

 

[dorayme]

dorayme wrote :

Maybe a solution like http://www.html.it/articoli/niftycube/nifty9.html as
an alternative.


I'm not sure a stable solution is possible. Maybe with some text but if
larger elements are applied (pictures, wide table) I think it will collapse.
I even had a problem with a simple 2-column layout like
http://www.nicoschuyt.nl/test/col_test.htm (narrow the screen and the table
and right column are overlaying each other)
A solution like http://www.nicoschuyt.nl/test/col_test_relative_wd.htm was
better but failed finally with more elements.


I prefer to go fishing in my spare time

<g>

About my if no coloured backgrounds, and your counterexamples, adding
overflow: auto to #content would improve the situation considerably. So
care is still needed! But without the need for coloured backgrounds or
borders, the task is easily manageable.

About borders, I think it is possible to provide *full length* borders
that appear no matter which col has the most content by giving the left
col a right border and the right col a left border and organising to let
them overlap each other, one thin border should result. But coloured bgs
are a pest. Fun, but a challenge without tables if you want simple
semantic markup.