www.webdeveloper.com
Results 1 to 4 of 4

Thread: this must be a really simple CSS question

Hybrid View

  1. #1
    Join Date
    Jul 2009
    Posts
    77

    Question this must be a really simple CSS question

    Hi, I'm having trouble understanding how floats work with the box model... I set up a sample page to illustrate what my problem is: http://attentioneering.com/sandbox/floattest.html.

    I've got an outer div with a bunch of elements inside it that are floated to the left. Now I want to make the background colour of the div red, but it doesn't work! It's almost like the elements that are coded inside the div are flowing outside the div (if you look at the page with Firebug, you'll see that the div is there, but it's just a skinny line).

    Can anyone tell me what's going on here?

    Thanks for any tips!

    Code:
    <html>
    <head><title>Sandbox Page</title></head>
    <body>
    
    <div class="outerbox" style="width:800px; margin: 0 auto; background-color:red;">
    
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    <div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Great question. The reason is, parent containers treat floated elements basically like absolutely positioned elements....note that other elements in the document still recognize where floats are, but parent elements of floated containers, pretend they aren't there.

    If you put a border on your parent container, you'll see that it has 0 height and sits at the top of your page, again, because it's saying, "all my children are floated and therefore have no effect on me...I only pay attention (i.e. wrap around) to child elements that aren't floated".

    There are two methods to "fix" this behaviour one is old, one is new, BUT they both serve useful purposes nowadays because they'll be times when you can't use the newer one.

    OLD: Create a "pseudo" element after your parent container. and give it a position. The pseudo element will recognize that it has to appear after all of the child floats and will automatically trigger the parent container to wrap around all of the children.

    Code:
    #parent:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; zoom:1;}
    NEW: The new method appears to have been discovered almost by accident one day a few years ago. Somebody figured/found out (I can't remember whom off the top of my head) that if you apply this piece of code, then you parent element will wrap all of it's child elements.

    Code:
    #parent { overflow: hidden; }
    Like I said above, 90&#37; of the time I use the overflow: hidden method, but there are times when I actually need my parent to clear child floats, but not have it's overflow hidden (usually do to other relatively or absolutely positioned children that lie outside the parent and must stay visible), so the other 10% of the time I use the old :after method.

    Good luck in your learning.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jul 2009
    Posts
    77

    Thank you!

    Thanks for this. So is this a bug? I'm trying to think of a time when I would want the outer div to not wrap around the child elements...

    So if I made a WordPress template that by default had a 200x200 image floated left on every post, then I either have to hope that my posts are greater than 200px high, or else use one of these fixes?

    Thanks again!

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    No not a bug, just a non-intuitive behavior until you actually read the spec:

    http://www.w3.org/TR/CSS2/visuren.html#floats

    4th paragraph in:

    Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
    Note that for elements to be able to flow vertically alongside a float, then the CSS spec says the only way to do this is to take the float out of the normal document flow (consider this to be the same or similar to an absolutely positioned element, not in the normal document flow).

    When an element is out of normal document flow, then it's parent is not affected by it's dimensions, as your example illustrates.

    Like I said, not a bug, just not very intuitive for a lot of people.

    I perhaps threw the term "fix" around when I shouldn't have (although I did put it in quotes) - it's not a fix, it's a method to make this one aspect of the box model behave more intuitively.

    I honestly can't think, right now of an instance where I would want a parent container to ignore a floated child's height, but I'm certain they exist, otherwise the spec would be different.

    As for your comments about the wordpress theme, yeah, you're exactly right, that's what you'd have to do.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles