Sent by Zoe Gillenwater on 30 September 2003 20:08
I am having some inconsistent float behavior within the same browser
that is really puzzling me, and I was wondering if someone knew why it
does one thing one time and another the next.
Based on what I've read about the float property, at w3c and various
tutorials, applying float to a block removes it from the normal flow of
the page. This means that if the content of the float makes it larger
than its parent, it will overlap the boundaries of its containing
element/parent. Right?
I see this behavior on the following page:
http://www.walkableamerica.org/testarea/partners.htm
(CSS at http://www.walkableamerica.org/testarea/pwa_style.css)
Notice how the little logos in the middle of the page break out of the
gray bordered box that they are contained in. This seems to fit with
the standard, but I don't like it.
However, in the same browser I see very different results for the same
code on the following page:
http://www.walkableamerica.org/testarea/test_float.htm
(CSS at http://www.walkableamerica.org/testarea/test_float.css)
Notice here how the red bordered box named "maintext" pushes the borders
of its contained orange bordered box out to accomodate it, even though
it is a float.
Both pages have the same code: container div with two divs nested, one
floating left. But they render completely differently, not
cross-browser, but within the same browser! The behavior that I like is
the second: the container box pushes out to accomodate the nested float,
even though this isn't the correct behavior, as I understand. Does
anyone know why it is doing it, so I can replicate the behavior?
FYI: If anyone is curious why I am mixing tables with CSS positioning on
the first page example, it is only because I am on a tight deadline.
I'm still looking for help with the second page though, so any
suggestions there are very welcome! I would love to get everything
working in pure CSS, but the test_float page is too much of a mess right
now in NN4 to be useable!
Thanks!
Zoe
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/