SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position and Float

    <html>
    This is why i don't understand CSS. Browser: IE 6.0 <br/>
    Doesn't seem to work at all in Netscape 8.0<br/><br/>



    <head>
    <style type="text/css">
    body {
    margin: 0px;
    padding: 0px;
    color: #000;
    background-color: #ccc;
    }

    .staticPosition {
    position: static;
    padding: 10px;
    margin: 5px;
    background-color: #fff;
    border: 1px solid #000;
    width: 20%;

    }

    .floating {
    float: left;
    padding: 10px;
    margin: 5px;
    background-color: #fff;
    border: 1px solid #000;
    width: 20%
    }

    P {
    clear: left;
    }

    </style>
    </head>

    <body>
    Example 1:
    <div class="staticPosition">1 static</div><div class="floating">2 float</div><div class="staticPosition">3 static</div><div class="floating">4 float</div><div class="staticPosition">5 static</div>
    <p>
    <ol>
    <li> I understand why #2 floats to the left against the edge of the screen. </li>
    <li> I understand why #3 moves to the right of #2. </li>
    <li> I DON"T understand why #4 although a float does react as #2 did and start at the left edge of the screen. </li>
    <li> In relation to #4, #5 does as expected. </li>
    </ol>
    </p>
    <hr/>
    Example 2: <br/>
    <div class="staticPosition">1 static</div><div class="floating">2 float</div><div class="staticPosition">3 static</div><div class="staticPosition">4 static</div><div class="floating">5 float</div>
    <p>
    <ol>
    <li> #1-3 are the same. I understand them </li>
    <li> I don't understand why #4 doesn't move to its static position against the screen </li>
    <li> #5 does what i would expect it to do, but looking at Example 1, i think it should have acted more like #4 in example 1</li>
    </ol>
    </p>
    <hr/>
    Example 3: <br/>
    <div class="staticPosition">1 static</div><div class="floating">2 float</div><div class="staticPosition">3 static</div><div class="staticPosition">4 static</div><div class="staticPosition">5 static</div>
    <p>
    <ul>
    <li> When #5 is static why doesn't it do like #4 in both of the above scenarios? Looking above i would think it should be #3-5 all lined up</li>
    </ul>
    </p>
    </body>
    </html>
    Last edited by jacobpressures; Nov 3, 2005 at 15:38.

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1)No doctype
    2)Never, ever code for IE. Always code for Firefox first, then adjust for IEs quirks and bugs.

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2) It doesn't in FF with a doctype.
    3) What's the diff? They're coded the same.

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't finish this but IE is behaving badly. Get FF and a proper doctype and get it working in FF first. You'll find things working correctly there and can see where the IE bugs are.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i see your links. I'll look there.

    Ok, It now works in Netscape, but it still looks the same as IE. So there is something my CSS book isn't explaining.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This is why i don't understand CSS
    You hit the nail right on the head there lol

    Lets start with IE.
    Code:
    <li> I understand why #2 floats to the left against the edge of the screen. </li>
    <li> I understand why #3 moves to the right of #2. </li>
    <li> I DON'T understand why #4 although a float does react as #2 did and start at the left edge of the screen. </li>
    <li> In relation to #4, #5 does as expected. </li>
    #4 - A float will float in the direction specified but will float as high as it is allowed to go. The static content that comes before the float #4 finishes at a higher position than float #2 and as float #2 has a 5px bottom margin then float #4 snags against that bottom corner as would be expected.

    If you remove the margin from your float you will see that float #4 now misses #float2 and aligns against the window. Remember when you float elements they float against each other first as long as they are allowed. They will only go under the float when they are clear of the float and its margins.

    1. #1-3 are the same. I understand them
    2. I don't understand why #4 doesn't move to its static position against the screen
    3. #5 does what i would expect it to do, but looking at Example 1, i think it should have acted more like #4 in example 1
    #4 This is an IE quirk because you have forced 'layout' on the static element by giving it a width. The static element snags on the float (just as the previous float did in the explanation above). The static element has a 20% width and therefore cannot slide under the float and wrap because that would make nonsense of the width. Therfore it takes up its position to the side of the float and just carries on downwards.

    If you again remove the margin from your float you will see that the static element doesn't snag on the float and falls underneath as expected.

    When #5 is static why doesn't it do like #4 in both of the above scenarios? Looking above i would think it should be #3-5 all lined up
    For the reason I just explained in that #4 was snagging on the corner margin of the float and needed to stay where it was to honour its width. #5 is clear of all floats and just takes up its normal position in the flow.

    Again just remove the margin from the float and all the elements on that page will make sense to you as they will all line up nicely.

    Now to the important bit.

    Most of those ie behaviours while understandable are in fact wrong and the main cause (apart from the margins) is the fact that the static element has a width (and attains 'layout') and is outside of the float (i.e. the float is not contained within a static element). It makes no sense to give the static element a width anyway unless the float is contained inside it.

    The correct behaviour is as displayed in Firefox (and NN8) and I will explain why

    You have given the float a width of 20% and you have given the static content a width of 20%. Floats are removed from the flow and therfore the static contents widths starts at the left edge of the screens and occupies 20%.

    Unfortunately the float is also 20% wide so there is no way on earth that the static content can be alongside that float as they occupy the same width and therefore the static content gets pushed underneath. Firefox is concistent in thie behaviour and applies it thoroughly all the way through.

    Floats only repel the foreground content and backgrounds and borders will always slide under the float (except in IE of course).

    In your example you basically have a 20% static element in which sits a 20% float and so there is no more width available for content.

    If you wanted 20% of space to the left of a 20% float then the static element needs to be 40% wide. Preferably for ie the floated element should be inside the static element. If you want a positioned block nest to a float then float another element instead.

    Read the faq on floats as there is a lot of information to take in

    While this may seem difficult most of the problems are because you are trying to do something that is not correct and therefore you confuse ie and firefox does the right thing.

    Floats are very useful and I use then a lot without problems (once you know the few odd bugs). here are a few things to remember.

    1)Floats only float alongside static elements (or allow the static element to wrap) when the static elements follow the float in the html.

    2)Floats will float as high as they can and if there is just a 1 pixel margin showing from a previous float then the float will not clear that previous float.

    3)Ie has a few bugs such as the 'layout" issue, a double margin bug and the 3 px jog (see faq on floats).

    4) Floats are removed from the flow and need to be cleared to regain the flow of the document.

    5)The static parent of a float doesn't automatically encompass the float.

    6) backgrounds and borders on static elements following a float will slide under the float (in good browers). therefore if you wanted to place a paragraph to the left of the float the paragraphs margin would be from the side of the parent container (as if the float wasn't there).

    Hope that explains some of your problems

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    Mobile
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GREAT INFO! I would have never thought of this. I guess it comes with experience. Thanks so much. It will take me a minute to digest it. I'm going to print it out.

    Thanks!


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
  •