SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floated divs not filling containing div?

    Hi folks,

    Tried searching but couldn't find anything. Maybe I just fail at search...

    I am trying to get 3 floated divs to fill a containing div. For some reason the containing div is giving no indication that anything is inside it at all. The background color of #efefef is only visible as a 15px strip...because of the padding.

    HTML Code:
    <style>
    
    #main {
      background: #efefef;
      width: 900px;
      margin-top: 15px;
      padding-top: 15px;
      //float: left; this makes main fill with the contained divs, but it  seems...strange to have to do that?
    }
    
    #one {
      float: left;
      width: 300px;
    }
    
    #two {
      float: left;
      width: 300px;
    }
    
    #three {
      float: left;
      width: 300px;
    }
    
    </style>
    HTML Code:
    <div id="main">
          <div id="one">
            <p>Here is some text in div one!</p>
          </div>
          <div id="two">
            <p>Here is some text in div two!</p>
          </div>
          <div id="three">
            <p>Here is some text in div three!</p>
          </div>
    </div>
    
    
    "Do or do not. There is no try." -- Yoda

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    You have to clear your floats. I know people around here don't like it, but the simplest way is to just add a clearing div.

    Code:
    <div id="main">
          <div id="one">
            <p>Here is some text in div one!</p>
          </div>
          <div id="two">
            <p>Here is some text in div two!</p>
          </div>
          <div id="three">
            <p>Here is some text in div three!</p>
          </div>
          <div style="clear: both;"></div>
    </div>
    You can also see this thread:

    http://www.sitepoint.com/forums/css-...ls-770620.html

    Also, you should set a width on any your floated divs, including the inner ones.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div style="clear: both;"></div>
    Worked perfectly! I've seen that used before, but with span instead of div?

    It still puzzles me that it also works if I float the containing div...in this case, the div named "main". If I just float it to the left, the other divs fill it just fine. I wish I understood why!!

    Thank you for the link as well.
    "Do or do not. There is no try." -- Yoda

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The best practice is not to use a clearing element, as that is essentially presentational mark up. Give #main {overflow:hidden;}that way you wont have to use a clearing div.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Dresden_P is quite right - WASTING markup on a clear is just bad practice and outdated coding... to be filed alongside other clearing techniques like "clearfix" classes in the "outdated/outmoded/just plain wasteful" bin.

    Also beware IE6- overflow:hidden doesn't work for float wrapping, but your width declaration trips something known as "haslayout" so IE will wrap the floats anyways. The only reason it works in IE7+ is they made overflow a haslayout trigger.

    You may have noticed that in IE6 your original code did in fact wrap your floats... all because of that width:900px on #main -- this is an INCORRECT behavior, even when it is the desirable one.... if you still give a flying purple fish.

    Honestly, I'm still a little shocked to see people recommending a clearing DIV; what is this, 2001? looks at all the new sites still being written as HTML 3.2 with a 4 tranny or 5 lip-service on it... my bad, I guess it's 1997

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In short...thank you guys.

    Taking what you guys know (which is clearly undervalued as this forum is free) and translating it into plain english is PRICELESS.

    And thank you for the "haslayout" reference which prompted Googling and further understanding.


    I'm sailing with CSS, but only with your help. &#x202a;What About Bob Clip 3&#x202c;&rlm; - YouTube
    "Do or do not. There is no try." -- Yoda

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ylang View Post
    Code:
    <div style="clear: both;"></div>
    Worked perfectly! I've seen that used before, but with span instead of div?
    The "clear" property only applies to block elements and shouldn't be used with a span (although setting the span to display:block would have the desired effect).

    We have a section on haslayout in the Sitepoint reference which covers most bases.

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Honestly, I'm still a little shocked to see people recommending a clearing DIV; what is this, 2001? looks at all the new sites still being written as HTML 3.2 with a 4 tranny or 5 lip-service on it... my bad, I guess it's 1997
    That's because it works. It is the simplest solution that is known to work across all browsers. Clearfix is a hack. Clearfix generates content in the CSS then hides it. That's more absurd than using a clearing div.

    CSS - Clearing floats

    When I started making websites as a hobby, I don't think using overflow: auto or hidden was widely known. The way it was done was to use a clearing div. Is overflow: auto a better alternative? Perhaps. Does it work across all browsers? Maybe, I don't know. There are a few potential issues with using overflow to clear floats that people should be aware of.

    http://www.impressivewebs.com/overflow-hidden-problem/

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    That "problem" is more failure to understand what elements to put it on and which ones not to... You want a scrollbar, it shouldn't be used on your outermost width container!

    That's a very selective and frankly broken way of adding wrapping behavior -- kind of cherry picked to piss on overflow:hidden for... well... I don't know why.

    Though there is another "fix" we've not discussed; float's wrap floats

    I haven't used a clearing div in at least six or seven YEARS. Maybe longer. I've NEVER used that bloated clearfix nonsense... never needed it.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cheesedude View Post
    There are a few potential issues with using overflow to clear floats that people should be aware of.

    http://www.impressivewebs.com/overflow-hidden-problem/
    See my last post in that section

    The overflow method for clearing floats was attributed to me back in 2005 when I causally mentioned to Alex that it was the method I was using at the time. It's a good method when you don't want visible overflow or if you don't have fluid width containers where content may get cut off. Of course you can use any property that creates a new block formatting context to contain floats (eg. float, inline-block, display:table, absolute positioning - all will contain floated children but their use does depend on situation and all have side effects.)

    Unlike Jason I don't see a problem with using clearfix for the odd element but it is not without its problems either and I very rarely have need to use it.

    In the end it boils down to an understanding of the dynamics of what you are doing and then you use a suitable method. The beauty (and the beast) of CSS is that there is never one way to do something for every occasion. It's flexibility may be a drawback to quick learning but in the end creates a powerful set of tools to work with.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Unlike Jason I don't see a problem with using clearfix for the odd element but it is not without its problems either and I very rarely have need to use it.
    Funny part is MOST of my 'issue' with clearfix has nothing to do with it's CSS -- it's the wrapping it in a presentational class in the HTML I have the problem with.

    Same problem I have with classes like "smalltext", "heading", "left", or that OOCSS idiocy... saying what things look like instead of what they are -- completely missing several of the reasons to use CSS in the first place.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Funny part is MOST of my 'issue' with clearfix has nothing to do with it's CSS -- it's the wrapping it in a presentational class in the HTML I have the problem with.
    Ok - I understand what you mean and yes adding the class to the html is a bit lazy when it can be done via the css anyway as 99% of the time the hook will be already be there to use.


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
  •