SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearfix vs. Overflow:xxxx

    I've gotten used to using "overflow:hidden;" instead of adding a clearfix. For those of you who have tested and tried both methods, are there any disadvantages to using an overflow? Can it be a 100% replacement instead of a clearfix?

    Looking forward to hearing some of your opinions, thanks.
    Cross browser css bugs

    Dan Schulz you will be missed

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    overflow:hidden; will only be a solution to enclose floats with compliant browsers. It will not help with ie bugs.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using overflow:auto; or overflow:hidden; only works "right" when you don't set a height on the same element.

    I generally prefer using "clearfix" myself.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've generally given up on both - they are a lot of CSS, requiring browser conditional and/or equivalents (I consider star-hacks a conditional - for all intensive purposes they function the same)...

    Simplest solution? Floats pay attention to the size of floats inside them, so float the container... which works fine for fixed width elements or places where you can use 100% width... BUT

    What about when you need to declare padding making 100% width not viable? Usually you just margin/pad the content instead of the container, but when that's not viable, there's a simple alternative, it's called a table.

    People may call it a hack (oh, but star hacks and browser conditionals aren't?), isn't semantic (sorry, I'm declaring columns and rows... columns and rows? That sounds like a table!), and in general act like it's a cardinal sin (bite me), but all the arguements against it are all 100% grade A USDA certified manure if you look at it rationally instead of being a lemming who blindly follows a printed specification that NOBODY has actually implemented properly.

    Even so, my take on All4Nerds example using the float 'hack'.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    	
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    	background:#d8d8d8;
    }
    
    .wrapper {
    	width:100%;
    	float:left;
    	background:#c6c6c6;
    }
    
    .left {
    	width:20em;
    	float:left;
    	background:#ff6600;
    }
    
    .left span {
    	display:block;
    	margin-top:20em;
    }
    
    .right {
    	width:20em;
    	float:right;
    	background:#ff6600;
    }
    
    .right span {
    	display:block;
    	margin-top:10em;
    }
    
    p {
    	padding:1em;
    }
    
    </style>
    
    </head><body>
    
    <div class="wrapper">
    
    	<div class="left">
    		<p>start
    		<span>end</span>
    		</p>
    	</div>
    	
    	<div class="right">
    		<p>
    			start
    			<span>end</span>
    		</p>
    	</div>
    
    </div>
    
    </body>
    </html>
    No 'real' hacks - in fact, this is how the CSS specification SAYS it should be done... and it works cross browser without any issues I'm aware of - though it does oft necessitate floating other sibling containers the same way for IE box model problems.

    Validates, less code, what's not to like?

    (oh, and excuse the use of block spans with margins instead of all those <br /> - I just hate padding stuff that way)

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Yours is a maintained float not a clear float, this robs one of the most underrated but strong property from a container div the auto width that can take padding margin and borders without a width set
    I believe I said that.

    Quote Originally Posted by deathshadow
    What about when you need to declare padding making 100% width not viable? Usually you just margin/pad the content instead of the container, but when that's not viable, there's a simple alternative, it's called a table.
    Yeah, I did. Of course the other solution in those cases is to either pad the containers parent or margin it's content.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I've gotten used to using "overflow:hidden;" instead of adding a clearfix
    As the inventor of the overflow method I suppose I should chip in my comments

    All clearing methods have minor drawbacks and the one you use depends on the job in hand.

    1) The overflow method is only useful in simple situations where elements have defined widths and as mentioned above fails in some older browsers.

    It is however the only 100% correct method to clear floats without (structural mark up) as overflow makes an element take notice of non-visible overflow (such as floats). However browsers have failed to lmplement the specs correctly on this so I would say use it with caution and test the results.

    2) The Pie method of clearing works almost everywhere and doesn't involve any structural mark up either. There is a very small bug where you clear the last div on a page which can leave a small gap at the bottom of the viewport. Otherwise it works well all the way back to ie5 mac and up to ie7 and is 100% solid in use.

    The drawbacks are that it is an ugly hack and requires a lot of complicated code to go with it.

    3) Float the parent as well (the method preferred by Deathshadow above). This is also a good method of clearing that requires no structural mark-up and works everywhere.

    The drawbacks as alreay pointed out are that you may loses some flexibility in your design.

    4) Empty Clearing div:

    e.g. <div style="clear:both"></div>

    Works in most modern browsers but fails in firefox pre 1.5 and mozilla pre 1.6. To enable earlier moz and firefox to clear you need to add a height to the clearer. Using a height will enable floats to be cleared everywhere.

    The drawbacks are that you have now inserted extra height into the layout that can result in a gap between elements that is not wanted. To reduce the gap you can use this method insteead.
    Code:
     .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
     }
    Code:
     <div class="clearer"></div>
    The negative margin closes the gap and overflow:hidden stops ie from applying the full fontsize height to the element.

    The drawbacks are the non semantic markup in the html and you will still get a 1px gap in the latest versions of firefox and mozilla. However it works everywhere and is very reliable.

    It also has the added benefit in that you clear the float completely and therefore margins on elements after the float can be applied to make distance from the float. Floats ignore margins on static content and you cannot move static content away from the bottom edge of a float using a the static elements top margin (unless you make the margin so big that it reaches all the way back to its parent).

    Conclusion:


    Use the method that best fits the task in hand as all methods have some drawback one way or the other.

    Read the faq on floats for more links and info

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Float the parent as well, a maintained float also fails in the lower Mozilla’s
    Ahhh - Should have mentioned that

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    All clearing methods have minor drawbacks and the one you use depends on the job in hand.

    Use the method that best fits the task in hand as all methods have some drawback one way or the other.
    ... and those two sentences are the BEST answer. Learn ALL three techniques, look for more techniques, and choose the best one for what you are trying to do - do NOT get your heart set on any one way of doing things as you quickly fall into the trap of trying to fit a square peg in the round hole - with the end result usually being a dive for the hack bin.


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
  •