Sent by Bruno Fassino on 19 February 2005 20:08
Ellen Herzfeld wrote:
> Method 1 works fine. I find it possible to give the opener div a
> height of 0 instead of 1, so it takes no space at all.
Good to know!
> Also, in my
> case, as I use ems for the width of the floated div, I can't know the
> exact width to give to the negative margin and to the opener div. I
> used a reasonably large size (-900px for the negative margin and
> 1280px for the width of the opener div). No adverse effects seen.
>
> test page:
> http://ansible.xlii.org/web_design/CSS/float_drop/float_drop2.html
As you have found, a problem with this method is that it's difficult to
decide which values to use as negative margin and opener's width. A too wide
opener makes the horizontal scrollbar to appear before it is really needed,
a short one makes part of the content inaccessible...
> I used your background image. I hope you don't mind.
That's fine, of course :)
> Method 2 is more elegant but still needs additional divs. Also, here,
> it does work fine in IEWin6, but in IEWin5.0 and 5.5, the left float
> drops below the right one.
You are perfectly right. While assembling this test case I forgot a needed
hack for IE5.x/Win, I have updated the page now. Thanks.
> What do you mean by "more general" and "also has other advantages"
> for method 2?
It's "more general" because it doesn't require any guess about the widths.
So it is more applicable, at example when the falling object is a big
complex table whose minimum width is difficult to guess.
"Has other advantages" because (like other floated layouts with negative
margins) allows to put the main column first in the source, and, for
example, to emulate same-height colored background columns... You are right
in saying that it requires some additional wrappers.
I have some slightly more complex cases, for example:
<http://www.brunildo.org/test/test/IEWAfloatdrop4.html> (the "large" object
is a table. Of course let me know if you see any problem here.)
Best regards,
Bruno
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
