www.webdeveloper.com
Results 1 to 4 of 4

Thread: Interesting method to fully enclose a floated element within another (edited???)

  1. #1
    Join Date
    Jul 2003
    Posts
    259

    Interesting method to fully enclose a floated element within another (edited???)

    Hi everyone,

    I found an article on this and it looks like a great method but uses a lot of hacks.

    It started off with this:

    Code:
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    and then quite a few other hacks.

    Source Article Here

    I'm sure whoever wrote is a million times better at this stuff, but is there any reason something like this wouldn't work

    Code:
    .outerDiv
    {
         padding-bottom: -1px;
    }
    
    .clearfix:after
    {
        content: "."; 
        display: block; 
        height: 1px; 
        clear: both; 
        visibility: hidden;
        overflow: hidden;
    }
    Douglas
    Last edited by DJRobThaMan; 07-07-2006 at 11:31 AM.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Two browsers come to mind in which this could fail. IE5-Mac does not stretch block elements to encompas floated elements, and it also does not support the content CSS property. So the above method of clearing a float absolutely fails in IE5-Mac. If you're not supporting that browser, as it's used by an extremely small fraction of 1% of users, then it's not a bad method.

    The other big question is if IE7-Win supports the content CSS property. I don't think it encompasses floats like IE5 and 6-Win do.

  3. #3
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,924
    I don't think IE6 even supports the :after pseudo-element, let alone the content attribute.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  4. #4
    Join Date
    Jul 2003
    Posts
    259
    I don't think IE6 even supports the :after pseudo-element, let alone the content attribute.
    It doesn't, but that's okay because it encloses the float automatically (I think) .

    Also, the article claims that once display: inline-table; is applied to the style for the clearfix class in IE MAC then it should work in that browser.
    There is no way to do that without a hack, is there.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles