Sent by Eric A. Meyer on 9 January 2003 16:04
At 8:19 -0800 1/9/03, Bill Daly wrote:
>
>The hackery for the time being would be to put an
>empty div inside the end of the container div, and
>apply a "clear: both" style to it. That should
>stretch out the container block.
There's another approach that might be a bit simpler to use-- it's
fewer markup characters, and in unstyled documents it might actually
have a useful display effect. Try replacing each "clearing" empty
'div' with an 'hr', probably best to tack on a class of 'clearing'
unless you know you'll never use 'hr' elements for any other purpose,
and then style it like so:
hr.clearing {display: block; clear: both; visibility: hidden;}
This will not work in all design settings, as the invisible 'hr' will
hold open some vertical space. It's likely possible to crank that
space down to a minimum using something like zero margins, a 1-pixel
(or even no) height, zero-width borders, that kind of thing. Here's
what came to mind:
hr.clearing {display: block; clear: both; visibility: hidden;
height: 0; border-width: 0; margin: 0; padding: 0;}
Note that I have not tested this approach to its fullest, so there
may be traps hidden in various browsers. If anyone else would like
to run with the ball and find out, go for it.
Just make sure not to use 'display: none', since that would remove
the 'hr' from the document flow entirely and thus break the
box-stretching effect.
--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://www.mako4css.com/)
