extending divs in height to the longest of the two.

[windandwaves]

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

 

[dorayme]

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?

(1) If it is very important to you and nothing else works, use a
table for layout.

(2) If you can, don't want them both cols to have different
coloured backgrounds and end up equal lengths. Design around what
it is natural to design with, given the awkwardness of the tools.
Make a virtue out of the natural lengths they end up. There is an
honesty in letting the colour finish when there is no more
content to provide a useful background for. There are even
aesthetic arguments I can think of here that go beyond the "all
nice and tidy, divorced from function, pretty pretty" along the
lines of marrying form with function.

(3) Use the strategies you mention and talk to different browsers
via hacks, conditionals etc in your html and css. Perhaps look at
<http://alistapart.com/articles/fauxcolumns/> if you have not
already done so. Also
<http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layou
ts/>

 

[Bergamot]

I would
prefer if both divs would take on the length of the longest of the two
divs

http://webhost.bridgew.edu/etribou/layouts/skidoo/lean/
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/gargoyles/index.html

Creative use of borders and negative margins gives the effect you seek.
I think the CSS could be trimmed a bit, though.

 

[windandwaves]

wow

Thanks a million to both of you. I have learned so much!

That is css advanced. GREAT