> > From: Mark Wheeler and Michael Geary
> >
> > [Float clearing problems on these pages causing elements
> > to be pushed down on the page:]
> > http://mg.to/test/float.html
> > http://blog.zvents.com/

> From: Gunlaug Sørtun
> 
> Solution (one of many) is to isolate the container: keep the 
> clear from acting on elements outside the container.
> 
> <div style="overflow: hidden; zoom: 1;"> SOME TEXT GOES HERE...

Bingo! Thank you very much, Gunlaug.

For the event list widget on http://blog.zvents.com/ I added the "overflow:
hidden; zoom: 1;" to a div that already wrapped each event, and it took care
of the problem perfectly.

(For anyone who didn't see the page when it was broken, in the event list on
the right, the first event extended all the way to the bottom of the main
content section, pushing any other events in the list below that.)

Mark, let us know if this trick works for your page as well.

> Containing and isolating floats will also isolate any 
> 'clear'. Thus, the relevant information is found here:
> 
> 'Block formatting contexts' in all standard compliant browsers:
> <http://www.w3.org/TR/CSS21/visuren.html#q15>
> The choice of style (float/CSS-table/overflow) to achieve the 
> right effect, depends on entire layout in each case.

Thanks, that's very informative. I'd read that section before but didn't
connect it in my mind to this problem. Reading it again now makes things a
lot more clear.

So I understand why the "overflow: hidden;" fixed it, but could you explain
what the IE-specific "zoom: 1;" is for? I tried leaving it out and IE still
looked OK. I put it back in "just in case" but would like to understand what
its purpose is. Thanks!

> 'Not quite the same standard', for IE/win only:
> <http://www.satzansatz.de/cssd/onhavinglayout.html>
> The choice of hack (or not) depends on entire layout in each case.

Yes, I've studied that page too - it's a great piece of research.

In this particular case, my page looked OK in IE but was bad in Firefox, so
an IE hack wouldn't have helped - but the overflow trick was just the
ticket.

Thanks again,

-Mike

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to