SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clearing floated elements: ff vs ie7

    Hello,

    I am a bit perplexed at the behavior of ff in a current page I'm building (usually it is ff that makes the most sense).

    I have several elements that are floated in a row (several anchor buttons and a bar to fill the remaining space). These floated elements are all housed in a div container. Beneath this container with the floated elements, I have placed another div container with just a background color that spans the width of the row it sits beneath, creating an underline of sorts.

    If I don't specify clear:both for this underlining div, in firefox it will appear behind the buttons in the row it is supposed to sit beneath. It seems strange that ff would do this z-index kind of stacking just because the items within the above container are floated. And the container that houses the floated elements is not itself floated. Shouldn't it just appear beneath since there is not enough room to the right? That is what happens in ie7 and that behavior (for once) makes more sense to me.

    Anyway, this isn't really a big problem because i just put clear:both and it resolves. The real problem occurs when i want to place a margin between the container containing the floated buttons and the container that sits beneath. The margin that I specify is measured from the top of the above container in firefox but from the bottom of the above container in ie7. Why? Again, the ie7 behavior makes more sense to me here. After all, isn't margin supposed to represent the space between objects? Obviously this is problematic because I want the margin to be the same in all browsers.

    The only solution I could think of was to specify no margin and use a repeating background gif with the top portion transparent in order to create the gap. But this seems silly. Can't i accomplish this without resorting to graphics?

    Many thanks for any insight into this odd behavior.
    Last edited by rumremix; Oct 31, 2007 at 08:58.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have completely misunderstood how floats work and that is compounded by IE's erratic behavior

    Floats are removed from the flow and so a parent container that contains only floats in fact contains nothing and will be zero height. IE will actually obey this rule as long as the parent container does not have "haslayout" (see faq on haslayout). Once the non floated parent has "layout" then IE auto clears its floated children when it shouldn't.

    Therefore when you place a non floated element after some floated content the foreground content of the non floated element will be repelled from the floats and avoid the float in whatever space is available to it (e.g. to the side or underneath). However, remembering that floats are removed from the flow the background of this non-floated element actually begins at the bottom margin of the last non-floated container above it in the html (or at the start of its own containing block). In your case this in fact is the container that you thought was holding your floats, but as floats are removed then the height is zero, therefore the background slides all the way under the float to the bottom margin of this container (which is in fact the same as its top margin.)

    Now when you specify a top margin for this non floated element it takes its margin in the same way and the margin is applied from the bottom of the first non floated element above it (or its containing block if none).

    In order to move the non floated element away from the floats the margin would need to be bigger than the combined height of the floats. As I said above IE also exhibits this behavior (to some extent) unless the floats container has "layout" and then it auto clears the floats in error.

    If you want to move the non floated content away from the float you should apply the margin from the bottom of the float and it will move the non floated content away. The same applies if you apply clear:both to the non floated element and then the whole box will move away.

    The concept is simply that floats are removed rom the flow and therefore your background, borders and background colors will react as though the float wasn't there. However floats repel the foreground content which is the only part than gets moved around.

    Here is an article that explains this in detail

    http://www.search-this.com/2007/09/0...ar-about-this/

    In answer to your problem just add clear:both to the non-floated element and apply a bottom margin from the float instead.

    Hope that helps

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for setting me straight on this Paul. And i am happy to know there there is order in the universe and that IE is still the mischievous culprit.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •