I have been playing with a page template which is very simple, just a header area at the top and a menu area on the left which is floated to the left of the body area. Eg:
menu | body
However, I have found that any use of "clear:both" anywhere within the body document with also clear the float used in the template! That is, a "clear:both" clears every float on the entire page.
I kind of expected "clear:both" to be restricted to either the last float encountered, or only floats at the same DOM level (ie. its previous siblings).
An HTML example below. Basically this means I shouldn’t use "float" to define a template, right? Because it seems any "clear" in a document will ruin the template float. Is the how it’s supposed to be? Seems rather impractical if so, but maybe I’m doing something wrong?
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
this is the header
this is the left menu
it floats to the left
of the content
this is the body of the page
it displays to the right
of the floated menu.
this floats left…
and so does this
this clears the above float and the template menu float!
which is why I am down here and not just below the above floats. sad face.
How am I supposed to use floats for a page template when any “clear” will destroy the template?
Oh excuse me for trying to help
When I looked at your general coding and use of <br /> tags for menu items instead of ul li tags, it seemed to me like you were a novice, but I guess you are much more expert than me, so in future I will refrain.
Have a nice coding day
You are not understanding the basics of clearing floats.
When I looked at your general coding and use of <br /> tags for menu items instead of ul li tags, it seemed to me like you were a novice
So you make those assumptions, basically calling me ignorant and a novice, then you take offence at my tone? lol
but I guess you are much more expert than me
Just fyi.. When someone is unimpressed with a comment of yours, the better response is to ask yourself why. The poorer (and sadly most common) response is to get all high-horse and assume it’s someone else’s fault.
I found a workaround, which is to set either "overflow:hidden" or "position:absolute" on the template element. This, in effect, gives "responsibility" of the floats to that parent element. Setting "clear:both" within such a parent won’t clear floats outside of it.
That’s a quirk of floats I wasn’t aware of before. Still, it’s a hack… "overflow:hidden" has undesirable side-effects, as does "position:absolute". Thank god for standards, but still, W3C has a long way to go before real-world designers and app devs can relax have an easier time. It’s still a mess in there.