SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two right floated elements, one with a clear-right, are changing a left float, why?

    Here's the situation: I have to two right floated elements and one left floated element inside a container. Each right floated element is a set width, the second right floated element has a clear: right; applied so it goes underneath the other right floated element.

    Then, I have a left floated element inside a standard paragraph. This left floated element is being cleared below the first right float, even though the only clearing rule is clear: right;

    In essence, I have no idea why my left float is being effected at all when I was under the impression that the right floats should work on their own.

    I know how to fix this problem, so that's not really my question. I just really want to know why this is happening, and how in the world it could be what's expected to happen under the CSS spec.

    Insight would be great. I feel like I have a darn good knowledge of CSS so this whole situation is a bit perturbing to me. Thanks for your time everyone!

    Here is the example of what I am talking about: http://imulus.net/css_examples/float-issue.html

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

    It would be rule 5 in the float model that dictates this behavior.
    Quote Originally Posted by w3c
    The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
    http://www.w3.org/TR/CSS21/visuren.html#floats

    If you have multiple floats that follow each other then you should simply use one floated wrapper for them.

    (BTW IE doesn't agree with the specs and is displaying how you expected. Note than when you add a width to the body you will need to add position:relative or IE goes berserk ).


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
  •