467,073 Members | 1,321 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,073 developers. It's quick & easy.

Clearing floats to make enclosing DIV expand: problem

While noodling around, looking for a good layout for an "events calendar"
page, I came upon a problem that has me stymied.

Have a look at http://kpuc.org/events/upcoming-2.html .

The basic structure of each event is:

Event div
Left-floated image
Event header div
Left-floated div (clever "calendar-style" date)
Event title and time
Event description

(For debugging purposes, the Event div has a white background, and the Event
header div has a grey border.)

I eventually want to simulate a 2-column layout inside each event div: image
on the left, everything else neatly lined up off the image's right side. I
can't even get that far, because a problem wreaks havoc with the event
header.

Some background:

Since floats are not part of the document flow, if you want to ensure that
an enclosing div is at least as tall as the float, you typically end the div
with a dummy "clearer" div:

<div class="FlowFloat">&nbsp;</div>
</div>

and set the "clearer" div to "clear:both", with additional CSS to make it
invisible, yet have a presence in the document flow. (See
http://www.complexspiral.com/publica...aining-floats/ for a
demonstration) If the enclosing div's content is shorter than the float it
contains, the "clearer" will force the div to expand to the desired height.

Now on to the problem:

If I use a "clearer" div inside the event header to ensure that the header
is at least as tall as the "calendar-style" date, the "clearer" div is
correctly positioned below the date, about halfway down the floated image
outside the event header. (I can verify this by using Mozilla DOM Inspector,
which will flash a border around any element, even my insivible "clearer"
div.)

Unfortunately, as shown by the grey border, the event header expands
*beyond* the "clearer" div -- the bottom of the event header is next to the
bottom of the floated image *outside* the header.

I can't make heads or tails of this. The event header ends with the
"clearer" div, so why should it end onscreen quite a ways below the
"clearer"?

Thanks for your help.

Jul 20 '05 #1
  • viewed: 4810
Share:

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

18 posts views Thread by Niels | last post: by
6 posts views Thread by Michael Rozdoba | last post: by
4 posts views Thread by LB | last post: by
8 posts views Thread by Tom | last post: by
2 posts views Thread by Andrey Tarasevich | last post: by
44 posts views Thread by Kosio | last post: by
reply views Thread by Simon Dean | last post: by
13 posts views Thread by yb | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.