Posted by Bernhard Sturm on 04/06/07 22:16

Jens Lenge wrote:
> Hello world,
>
> although this sounds like a FAQ to me, a have found no answer yet: How
> can I make two columns the same height in a CSS-based layout without
> using a table and without specifying a *fixed* height?

no need to use tables for such a problem. this can be achieved within
CSS without a lot of magic.
With a simple trick this can be done with pure CSS: if you ask yourself
what is it that makes your two columns the same height, then you're
almost at the answer: it's the color of both columns (eg. green and
red), and not the actual height of the columns.

1.) Now the trick is to make the two columns transparent
(background-color:transparent;)
2.) then create a 1px-height GIF image containing a 120px long section
of red pixels and a 120px long section of green pixels, resulting in a
1px x 240px long GIF.
3.) place this GIF in the container div that holds the two coloumns as a
background-image:

background-image:url(1x240.gif);
background-repeat:repeat-y;

Now you have the perfect illusion of two columns always of the same
height, regardless of the amount of content the two columns contain...

HTH
bernhard




--
www.daszeichen.ch
remove nixspam to reply

[Back to original message]