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:
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?
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.
You are not understanding the basics of clearing floats. By declaring clear: both you are effectively clearing all elements floated right and left.
Read this article on floats and clearing http://css.maxdesign.com.au/floatutorial/clear.htm
You are incorrect. I’m pointing this out because I do understand it, and it’s a problem.
If you have a solution to the problem, feel free to post it.
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
So you make those assumptions, basically calling me ignorant and a novice, then you take offence at my tone? lol
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".