- This topic is empty.
July 25, 2010 at 3:46 am #29722
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:—————-
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
this is the body of the page
it displays to the right
of the floated menu.
contentthis floats left…and so does thisthis 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?July 25, 2010 at 5:34 pm #80352virtualParticipant
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.htmJuly 25, 2010 at 9:25 pm #80363"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.July 26, 2010 at 12:27 am #80365virtualParticipant
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 dayJuly 26, 2010 at 1:06 am #80366"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.
- The forum ‘CSS’ is closed to new topics and replies.