Previous Message
Next Message

RE: [css-d] container <div> closes before contents are finished.

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 (, List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (
Previous Message
Next Message

Message thread:

Possibly related: