Posted by windandwaves on 11/15/06 05:01

Hi Gurus

Consider you have two divs:

<div style="float: left; width: 300px; background-color: red;">
Donec quam odio, hendrerit ut, commodo vel, egestas quis, leo. Morbi
fermentum. Morbi congue, mi a interdum consectetuer, pede lorem
vehicula dui, sit amet blandit tellus nisl in orci. Nullam est urna,
varius quis, eleifend euismod, ultricies sed, dui.
</div>

<div style="margin-left: 310px; width: 300px; background-color:
yellow;">
Praesent placerat nunc eget lectus. Etiam sit amet ipsum. Nulla arcu
felis, posuere ornare, commodo vel, feugiat ac, libero. Cras eget elit
sit amet nisi imperdiet pretium. Nulla condimentum eros a ipsum
interdum dictum. Nulla facilisi. Proin sed lectus. Cras ut nulla.
</div>


If I made the same two-column setup in a table I would be sure that
both columns would be equally long. This would be great, because it
would mean that the background-colors would go down equally far down
the page.

However, with the divs, the background-color stops where the text
stops. I can think of several ways to resolve this, but I was
wondering if there is a "best practice" solution.

The solutions I can think of are:
1. put in a min-height in the css (does not work in all browsers)
2. put in an invisible image that makes the div a mininum height
3. specificy height for both divs

All of the solutions above have the problem that they dont allow very
well for people with increased (or decreased font-sizes). I would
prefer if both divs would take on the length of the longest of the two
divs, thereby reaching nicely to the end of the text.

What can you recommend?

TIA

> Nicolaas

[Back to original message]