clearfix problem

**sularome** · Sep 21, 2007, 14:11

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

**markbrown4** · Sep 21, 2007, 18:05

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..

**all4nerds** · Sep 21, 2007, 23:52

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

**sularome** · Sep 22, 2007, 02:18

@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 :?

The SitePoint Forums have moved.

User Tag List

Thread: clearfix problem

Thread Tools

Display

Hybrid View

clearfix problem

Bookmarks

Bookmarks

Posting Permissions