Clear: Float

Jun 06

Tools & Tips, Tutorials, Web Design

Some random ramblings from Go Media’s primary web developer Chris Wilson:

Hey guys, I like the irony in this… after my mention yesterday of pushing html around for almost a decade, I hit an obstacle laying out a footer in the new world of Table-free markup. I wrote and manipulated a pile of javascript and css to try and push a footer down beneath two “float:left” divs … if you’re familiar with the Float property, it has a strange way of causing its parent to stop inheriting its contents height and width … the purpose of float:left (or right) is to allow following (or previous in the case of right float) content to wrap around it (similar to when you align-left an image inside a paragraph). This is useful when you’re creating columns of content. The annoyance comes in when you’d like that “next” piece of content to stop wrapping up around the floated element. This is where the “clear float” css class comes in. After spending probably 2+ hours going around and around with trying to layout my footer, it was a simple css style, “clear:left” that did the trick I was looking for. I had seen the ‘clear’ property forever, but it never clicked for me. I haven’t been using the ‘float’ property very long either, so that may be why I was unfamiliar with its powerful counterpart … in essence the “clear” property breaks the chain of the float property to rather start its own new line.

Go Media is a creative agency based in Cleveland, Ohio. Besides the GoMediaZine, we also work for clients and sell stock artwork and design files on the Arsenal.

staff, web

This post was written by:

Wilson Revehl - who has written 2 posts on GoMediaZine.

Wilson Revehl is co-founder of Go Media Inc. headquartered in Cleveland, Ohio. He currently operates the Southwest Florida office focusing on rich internet application design and development. Hobbies include tennis, golf, bowling, anything to do with the beach and most importantly... learning. Any free time is spent with loved ones, especially his wife Rachel.

Contact the author

If you enjoyed this post, show your support.
We appreciate it! Bookmark It! Stumble It! Float It!
  • The float style is common yet tricky, maybe they should invent a new method :p
  • lynguyen
    There's got to be a more semantic approach to '<div style="clear:both"></div>'. The div has no meaning once styles are stripped. The 'separator' tag would have been nice if XHTML2 didn't die on us.
  • i recently switch to CSS websites... and i have a little gadget i carry to every website:


    -------------------
    .clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

    the fellows of adobe included that in the dreamweaver templates... I hate templates but i wanted to see how they were building their floats

    Regards
  • Jon Thomas
    Hi Chris. You'll still find that you run into some problems down the road with floats. You'll be tempted to put an empty div below floated items to clear them as a spacer in some instances as well. Read this article, it works in most cases. I've had a lot of success with it.

    http://www.sitepoint.com/blogs/2005/02/26/simpl...

    Also, if you haven't used display:inline to your advantage, check out item 1 on this page:

    http://www.sitepoint.com/article/top-ten-css-tr...

    After typing this, I just saw Duluoz's comment in which he summarizes the method overflow method. The first article link I gave describes that method.
  • Duluoz
    You can also use overflow on the parent element to trigger correct inheritance. You then have no need for a clearing element.

    Example:

    #foo { overflow: auto }
  • joel
    Yes, the float issue is a bugger!
    If you're doing a double-float for a multi-column layout (float: right & float:left) and then slapping a footer beneath it, the best way to go about it is to put a div in there with
    "clear:both;" between the main content & footer. :)
    always tricky, for sure.
  • Nicole
    Another prime example of issues with floats is determining parent container sizing with backgrounds. A parent container's background image will stop where ever the static content ends - ignoring the floated content height, which can cause your background image to be cut off or not aligned properly. The fix for this is:

    *html .parentContainer {height: 1%; display: block;}
    .parentContainer:after {
    clear:both;
    content:" ";
    display:block;
    height:0pt;
    visibility:hidden;
    }

    The first case with *html takes care of IE, and the :after selector will take care of most other browsers. This is a CSS alternative to adding in empty elements with "clear: both" styles.
  • andre
    ah. I'm not sure how to post code. oh well, the site is pretty clear.
  • andre
    I rather like the "clearfix"

    http://www.positioniseverything.net/easyclearin...

    you would copy/paste this into your CSS, and then add a "clearfix" class to any element containing a float like that.

    so I think it would go like this:
  • Thanks for the rewording Lindsey! Cheers to the "CSS Girl"!!
  • Pat
    There are instances where clear:both is not entirely sufficient (namely, with some older browsers).

    I've found this to be helpful when trying to ensure those floats work properly across platforms:

    .clear {
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    margin-top: -1px;
    clear: both;
    }


    Hope that helps.
  • I wouldn't classify it as a cheat exactly, more of a "trick". I think cheat is too close to "hack" which most people want to stay away from.

    It is quite a commonly used trick that thankfully works 99% of the time (cross browser). It's also good practice when you are using floats and you don't want something to float to it's right/left you clear the specific side, or clear both right in the css for that element.

    I think the stacking and overlapping of floats is a common issue that stumps many CSS beginners, and this simple thing can fix many of the problems.
  • <div class="clear"></div>

    Read what I meant please, not what I said? :P

    P.S. The Wordpress AJAX Edit Comments plugin (http://wordpress.org/extend/plugins/wp-ajax-edi...) would have saved your readers the pain of reading my typo corrections as separate posts.
  • The second paragraph of text should have &ltdiv class="clear"></div> in it. Forgot to cleanse my response of actual html that would be interpreted as css by this page.
  • The following is a very useful css declaration / "cheat" that from discussions I've had with other designers is fairly common.

    .clear {
    clear:both;
    }

    So if you are writing content pieces and your particular div containers need to be used in float and un-floated situations, you can put a above and be assured that it will work. The same also ensures that if you have multiple floated elements inside a larger container that the background / border for the container will extend all the way around the floated contents.

    Note: Putting in theory is identical, but has been known to not have the same effect in Firefox and Safari.
  • Rob
    Wow. I feel your pain. I new to the "float" property. Thanks for the tip.
blog comments powered by Disqus