SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Clearing floats

  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing floats

    OK, so I've read a few posts about this - I know it's a controversial subject, but I can't quite work out what the recommended method is these days.

    I ask because I have a page: http://www.tnc-branding.com/wordpress/clients/ where the wrapper is not containing the right side div.

    Now, also probably controversially, I'm using the 960grid (I'm invested in it and normally I very much like using them, especially with clients who insist on adherence to pixel-perfect grids).

    Anyway, I can't work this one out. I've used this grid before with no clearing issues without using clear:both divs, but this time it's not working no matter what I do.

    Not sure what code would be useful to include as it might be easier just to view it using firebug or similar?

    Appreciate any insight...

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Adding overflow: hidden to .container12 solves it for me. In fact just the first one needs it, but it doesn't hurt on the second one (no effect).

    For more info you can also read this: http://www.visibilityinherit.com/cod...ain-floats.php
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. When I do that it simply hides the overflow (as you might expect).

    But that's not really what I'm aiming for - rather I'd like the left hand column to expand to fit the length of the very long right side content.

    Unless I'm missing something?

    Attached Images Attached Images

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Yeah, you do need the overflow: hidden, but you also need to remove position: absolute from here:

    Code:
    #rtNav {
    border-top: 1px solid #AFAFAF;
    position: absolute;
    top: 132px;
    height: 100%;
    }
    Never use position: absolute for laying out major parts of a page, as it takes elements out of the document flow, meaning that other elements don't see them and thus don't account for them.

    Also get rid of the top and height settings.

  5. #5
    SitePoint Member
    Join Date
    May 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yeah, you do need the overflow: hidden, but you also need to remove position: absolute from here:

    Code:
    #rtNav {
    border-top: 1px solid #AFAFAF;
    position: absolute;
    top: 132px;
    height: 100%;
    }
    Never use position: absolute for laying out major parts of a page, as it takes elements out of the document flow, meaning that other elements don't see them and thus don't account for them.

    Also get rid of the top and height settings.
    Ah, that's done it - thanks.

    It doesn't seem to need overflow:hidden, in fact, with the absolute positioning removed.

    Not sure why I did that in the first place, to be honest - must have been trying desperately to fix something, but I'm not entirely sure what!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by yolise View Post
    It doesn't seem to need overflow:hidden, in fact, with the absolute positioning removed.
    True, yes. The container12 doesn't need to wrap around the floated content, but if you had a background color on it, or some bottom margin, you'd certainly need it.

  7. #7
    SitePoint Member
    Join Date
    May 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    True, yes. The container12 doesn't need to wrap around the floated content, but if you had a background color on it, or some bottom margin, you'd certainly need it.
    Thanks. I'll keep that in mind if any bottom margins show up on any of the layouts.

    Nice to be able to remove all the clear divs too. I'd put them virtually everywhere in the hopes of fixing that sidebar thing!


Tags for this Thread

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
  •