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"> </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.
