SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)

    Who can explain this float connundrum

    Things are a little quiet around here so here's a quick little test for you debuggers

    In the following example an element is floated but the following element doesn't float alongside as you may expect.

    Who can explain this behaviour correctly?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {margin:0;padding:10px;}
    .float {
    	width:300px;
    	height:100px;
    	background:red;
    	float:left;
    }
    .content {
    	background:blue;
    	width:200px;
    	height:200px;
    	color:#fff;
    }
    </style>
    </head>
    <body>
    <div class="float">
    		<p>I am floated left</p>
    </div>
    <div class="content">
    		<p>Why is this blue box underneath the float and not beside it?</p>
    </div>
    </body>
    </html>
    And for bonus points please explain why ie7 and under render the elements side by side? (this can be seen in action by using IE7 mode in the developer tools of ie10+).

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I can't put it in technical terms, but I would expect the blue box to sit under and around the red box and the text inside it to wrap around the red box. Because of the width set on the blue box, although it still does sit under the red box, it is not wide enough to appear to wrap around the red box, but the text inside it still sits clear of the red box as best it can.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Ha! That's cute.

    Both boxes are behaving correctly (the top of the blue box is under the red box) and the text is staying outside of the floated box.

    I don't know the older IE bugs. I can see it in IE8 using IE7 mode, though.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    What do you think will happen if we add overflow:hidden to .content? ... and why?

    Code:
    .content{overflow:hidden}

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Adding overflow:hidden to .content *should* create a context for .content and keep it from flowing under .float (or so I think).

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I believe what is happening is that the wrapping around a floated element occurs as if the wrapped around element was inline ( if that makes sense) . Since the floated object is wider than the object wrapping around it, the latter drops bellow it. This is best visualized by adding of margin-left : 300px OR width:500px to .content , then you can actually see the ‘wrapping’ behavior more clearly.


    Overflow properties create a different rendering context. Similarly, you could use display:inline-block to achieve the same thing.

    I am not sure about legacy IE (it’s been a while ) but I would hazard to guess that it has something to do with hasLayout.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Adding overflow:hidden to .content *should* create a context for .content and keep it from flowing under .float (or so I think).
    Yes, .content's background will no longer slide under the float but it will now align to the side of the float instead (much in the way that may have been expected from the start).

    The reason for this is one of block formatting context which is what the overflow:hidden property imparts on .content. Once it has a block formatting content then the content must follow the rules from here which specifically state:

    The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.


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
  •