Especially the bit about, and I quote from this page:
“Elements which contain floated elements do not calculate their height as you might expect. In fact, if the parent element contains only floated elements, browsers will render the height at zero.”
Which might explain where on occasion when building “Box model” frameworks for building sites in freeway parent boxes collapse. Typically the Parent box Collapses, when only containing only floated element.
So the question is, as detailed on this page, in Freeway, how do you “clear the float before closing the parent element?”
One quick way to do this is to float the parent, too. This doesn’t
work in all layouts, but it’s an effective way of “auto-clearing”
floated children. The other is to add an element at the end which is
set to clear:both. This can be nearly anything. I use a break when I
hand-code, because it doesn’t really mean anything so it doesn’t upset
the semantic meaning of the page. Try adding a 1px tall DIV at the end
of the inline flow, and set it to clear:both.
Walter
On Jun 7, 2009, at 9:53 AM, WebWorker wrote:
So the question is, as detailed on this page, in Freeway, how do you
“clear the float before closing the parent element?”
Sure. The break tag, coded <br />, is a zero-height character that
means “end the line here and pick up the text on the next line”. In
DTP parlance, it’s a line-break, as opposed to a paragraph break.
I use this class:
.clearer { clear: both; width: 100%; }
…and then when I’m hand-coding, I use <br class="clearer" /> to
clear out of a float.
Walter
On Jun 7, 2009, at 10:48 AM, WebWorker wrote:
Thanks Walter,
I think the problem is when the parent in auto centred. I will have
a go with adding an item set clear:both.
Try doing that in your inline construction inside a markup item. That
might work correctly. It needs to be the very last thing in the
container. Make sure that you make the style using the Tag-only
method, so as to insert that style rule into the page without needing
to apply it to anything.
What would cause an upset for the “semantic meaning” upset and why?
Well, for example, if you had an H1 tag at the very bottom of the page
that contained nothing of interest whatsoever, it would seem a bit
odd, semantically speaking. Semantically, H1 shouts ‘look at me!’.
Ideally, everything on your page means something. Now that’s not ever
strictly true, but you aim for it. So before you add an element to the
page, you think, “What does this mean to someone (or something, in the
case of a bot) visiting this page?”
Adding a DIV to your page should mean that it contains something of
interest to your readers, and the fact that it’s in a DIV says that it
is separate – “divided” – from the rest of the content.
By definition, an empty DIV is meaningless. So you want to make as few
of those as you can. A break tag will be semantically meaningless in
all contexts, so it doesn’t sway the balance one way or the other.
Walter
On Jun 8, 2009, at 8:28 AM, WebWorker wrote:
Thanks Walt,
A 1px div at 100% width works, also a 1x1px gif as the last item.
Earlier you mention “so it doesn’t upset the semantic meaning of the
page”.
What would cause an upset for the “semantic meaning” upset and why?