Forums

Give help. Get help.

  • # January 25, 2013 at 4:11 pm

    **Method 1**

    Nicole Sullivan, the pioneer of object-oriented css, uses this:

    overflow: hidden; *overflow: visible; zoom: 1;

    **Method 2**

    Inuit.css uses a mix-in that generates before and after pseudo elements

    .cf{
    zoom:1;

    &:before,
    &:after{
    content:” “;
    display:table;
    }

    &:after{
    clear:both;
    }
    }

    Twitter Bootstrap uses the same thing (except it adds a line-height for opera)

    .clearfix {
    *zoom: 1;
    &:before,
    &:after {
    display: table;
    content: “”;
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
    }
    &:after {
    clear: both;
    }
    }

    **Which do you prefer?**

    The second method seems more bloated and I am not sure if it would work in Internet Explore 7 due to the display: table property. The first method is more concise but that doesn’t mean its better.

    # January 25, 2013 at 7:56 pm

    I usually use this one:

    ::after {
    clear: both;
    display: block;
    content: “”;
    }

    In the event that I have already used up my `::after` pseudo-element, or I need to support ancient browsers, I would use `overflow: hidden;` or `overflow: auto;` depending on the situation.

    # January 30, 2013 at 11:57 am

    I guess my follow up question is: Is there a place you can recommend with global statistics on browser usage? This company is not running any type of analytic program and I would like to keep the size of the file down.

    # January 30, 2013 at 1:00 pm

    I have this in my stylesheet:

    .group:after {
    content: “”;
    display: table;
    clear: both;
    visibility: hidden;
    }

    Then I just add the class “group” the the element to have it clear (don’t use Compass).

    Just my 2 cents.
    Magnus

    # January 30, 2013 at 2:40 pm

    Thank you for all your help everyone. It is much appreciated.

    # January 30, 2013 at 2:52 pm

    @Eric, ??

    # January 30, 2013 at 5:51 pm

    you don’t need to give it a dimension for overflow: hidden to work

    # February 6, 2013 at 7:13 am

    Make css as below:

    .clear{clear:both;}

    After completion of any floating div, call clear div…

    # February 6, 2013 at 7:22 am

    I use the same technique as pratikbhatt2009, apart from semantics of having empty divs is there anything wrong with this?

    Always curious to know best practices

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag