Impractical to use floats for page templates?

[ghiblifan]

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:

Code:

—————-
header
—————-
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?

Code:

this is the header

this is the left menu
it floats to the left
of the content

menu item
menu item
menu item
menu item
menu item
menu item
menu item
menu item
menu item

this is the body of the page
it displays to the right
of the floated menu.

content
content
content

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?

[virtual]

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

[ghiblifan]

"virtual" wrote:

You are not understanding the basics of clearing floats. By declaring clear: both you are effectively clearing all elements floated right and left.

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.

[virtual]

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

[ghiblifan]

"virtual" wrote:

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

"virtual" wrote:

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.

[Author]

Posts