Sent by Michael Geary on 8 August 2006 18:06
> From: Mark Wheeler
>
> I have a little problem I can't seem to figure out. Below is
> a sample code of some floated divs. It all is as I would like
> it, except the div that contains "MORE TEXT GOESE HERE...". I
> want that to clear the previously floated divs that contain
> dates and prices, not the red bordered div. This way, the div
> containing "MORE TEXT GOES HERE..."
> will end up underneath the previous four floated divs. I put
> that section in a div by itself, thinking that clearing the
> final float would only clear within the containing div, but
> it's not doing that.
> It seems to work fine in IE/Win, but not in Firefox or
> Safari. Any help would be appreciated. Here's the sample code.
>
> ...
Before anybody says "You'll get more replies if you post a URL," I did that
for you:
http://mg.to/test/float.html
When I load the page in IE, the "MORE TEXT GOES HERE" is below the red box,
just like in Firefox.
I ran into what looks like the same problem this morning. On the right side
of this page is a calendar widget and event list:
http://blog.zvents.com/
The event list contains two events, and in Firefox the second event is way
down by the bottom of the page. This is caused by the ".ZventsEventSeparator
{ clear: both; }" rule in zvents.calendar.css - if I take that out the event
list displays as expected. It's also OK if I change it to clear:right. It
looks fine in IE with or without the clear.
I added that clear to deal with floated images in this version of the event
list:
http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html
Without the clear, the images don't line up. clear:right works here as well,
but I did the clear:both because people using this widget might float the
images left instead of right.
I guess I am fairly confused about floats and clears, and especially how I
can use them in an embeddable widget without interfering with (or being
affected by) other layout on the page.
Is there a reference that anyone can recommend that would help explain this
kind of problem?
Many thanks,
-Mike
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/