SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Sep 2003
    Location
    Northern California
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Managing a floated div inside its parent container

    As far as I understand, when a floated div is inside a parent container, it can "spill out". The two options to correct this are to 1) Float the parent container as well. 2) Add the "clearfix" class to the parent container.

    Is this correct? If yes, when to use one or the other approach? If this is explained elsewhere, pls re-direct me. Thanks!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't use floats that way. I also suspect you're having a problem with one of your pages. What does your code look like?

    (PS: I also never, EVER, suggest using clearfix for ANYTHING.)

  3. #3
    SitePoint Guru
    Join Date
    Sep 2003
    Location
    Northern California
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The float in a float is working for me and I picked that tip up from a book Pro CSS techniques by Apress. I was just wondering if that approach was better/worse/neither compared with using clearfix.

    I have never had luck with the clearfix but assumed I was implementing incorrectly. Clear:both works just fine.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I was just wondering if that approach was better/worse/neither compared with using clearfix.
    Floating is a good solution, all browsers understand it - and it's just one simple property. My guess is Dan has a gripe with the clearfix method because it uses invalid CSS. Go with the simplest method that works.

    I personally prefer to use the overflow property to clear floated child elements. auto or hidden depending on the circumstance.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What the heck is "clearfix" ?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My gripe has to do with adding pointless HTML to a page when the element under the floated one(s) can do the job just as well.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <br class="clearfix" />

    .clearfix {
    clear: both;
    overflow: auto;
    }

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    You mean:
    Code:
    .clearfix:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    .clearfix {
    	display:inline-block;
    }
    /* mac hide \*/
    	* html .clearfix {height: 1&#37;;}
    	 .clearfix {display: block;}
    /* End hide */
    In the FAQ on floats

    And it's not meant to be applied to an element like br - you don't understand it's purpose properly.
    When you apply class="clearfix" to an element it will clear itself after the element.
    Like in the example provided:
    Code:
    <div id="outer" class="clearfix">
    <div class="floatedstuff">
    	<p>Floated content to be cleared</p>
    </div>
    </div>
    It kind of adds a <div style="clear: both"></div> after the element you specify.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I understand it. Many others don't. And I've seen the BR element abused like that far more often than many realize.

    I'm just against adding more markup to the code than is absolutely necessary is all. Even classes such as "clearfix".


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
  •