SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing Float Explanation :after

    Hi all

    Can somebody please explain why a client is using the below and what this achieves.
    I need to continue a build and just wondering is this a browser specific snippet of code needed for IE?

    Code CSS:
    .subNavigation:after
    {
    	visibility:hidden;
    	clear:both;
    	content:".";
    	height:0;
    	display:block;
    }


    Many thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It looks like one of the many methods going around to "enclose" floats. By nature, a container element (like a div) won't enclose (or wrap around) a floated child element. Placing some generated content (in this case, a period, via :after) at the end of the .subNavigation element will cause it to wrap around any other floated child elements. This is done for all browsers. There are easier methods, such as replacing all that code with

    Code:
    .subNavigation:after {overflow: hidden;}
    which suffices in most situations.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It looks like one of the many methods going around to "enclose" floats. By nature, a container element (like a div) won't enclose (or wrap around) a floated child element. Placing some generated content (in this case, a period, via :after) at the end of the .subNavigation element will cause it to wrap around any other floated child elements. This is done for all browsers. There are easier methods, such as replacing all that code with

    Code:
    .subNavigation:after {overflow: hidden;}
    I think Ralph meant:
    Code:
    .subNavigation {overflow: hidden;}
    is this a browser specific snippet of code needed for IE?
    No that is actually for everyone except IE6 and 7 as they don't understand :after. However IE6 and 7 only need haslayout in order to contain floats so you must ensure that the element has a layout which can be done by applying a dimension or using the more efficient but proprietary zoom:1.0. You can read more on the clearfix technique here.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    I think Ralph meant .subNavigation {overflow: hidden;}
    Yes, thanks Paul: a cut and paste fail. Also should have explained the extras details about clearfix.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, just what I thought.
    I use .example {overflow: hidden;} heavily myself but didn't realize this didn't work for IE 6/7, surprised I haven't see this, never seemed to have any problems before..

    It might be best if I just leave these in place for now and use the more correct way on future builds.

    Thanks for your input and link, Barry
    The more you learn.... the more you learn there is more to learn.


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
  •