SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clearfix problem

    Hi all,

    i'm having a problem with the clearfix. I got the code from PIE. But when i apply it i'm getting a padding at the bottom of the box(Firefox/Opera only, in IE it's ok :*)). Here is an example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    *{
      padding:0;
      margin:0
    }
    a img{
      border:0;
    }
    body{
      background:blue;
    }
    #wrapper
    {
      width:800px;
      background:red
    }
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    .clearfix {display: inline-block;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    
    </style>
    </head>
    <body>
      <div id="outerContent" class="clearfix">
        <div id="wrapper">
          <br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text
        </div>
      </div>
    </body>
    </html>
    When i remove the class="clearfix" from the outerContent div the space at the bottom disappear. Can you suggest something. I'm missing something but i can't find what

    thanks in advance

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Well Your text is invalid it needs to be within spans or paragraphs for the browser to know what it is, and secondly the clearfix method clears floats and you don't have any floats..

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    add overflow hidden to #outerContent{overflow:hidden;}

    PS since you don't float the clearfix is not needed at this moment
    also the problem disappears when you add a footer

  4. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @markbrown4 : i didn't floated the wrapper because i wanned to simplify the example

    @all4nerds: adding overflow:hidden; solved the problem but how? I don't have any height or width set :?


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
  •