Grow your CSS skills. Land your dream job.

Impractical to use floats for page templates?

  • # July 25, 2010 at 3:46 am

    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:
    < !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

    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?

    # July 25, 2010 at 5:34 pm

    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

    # July 25, 2010 at 9:25 pm
    "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

    Oh excuse me for trying to help :o
    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 ;)

    # July 26, 2010 at 1:06 am
    "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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".