SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: clearfix problem
Hybrid View
-
Sep 21, 2007, 14:11 #1
- 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>
thanks in advance
-
Sep 21, 2007, 18:05 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 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..
-
Sep 21, 2007, 23:52 #3
- 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
-
Sep 22, 2007, 02:18 #4
- 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