The clear fix 10.08.2008 @ 06:51pm 6 comments
If you often create layouts with XHTML & CSS and end up appending the <br style="clear: both;" /> or <div class="clear"></div> 'fix' to your markup when a containing element does not wrap it's floated children, then now is the time to stop! There is a much more efficient way to acheive this with CSS alone.
Whenever you come across this problem (in modern browsers excluding IE) you can resolve it by simply applying the following to the wrapper element:
#wrapper:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
I tend to add a .clear class that contains this block of code which you can then apply to any wrapper that requires it. However, for static elements (that are unlikely to change very often) like #header, #navigation and #footer, I just chain them on to the selector.
.clear:after,
#header:after,
#navigation:after,
#footer:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
Now I don't want to see anymore uneccessary <div>'s or <br />'s ;)
What people think...
There have been 6 comment(s) on this entry so far. Have something you'd like to say? Feel free to comment below.
Jenna said...
20.09.2008 @ 12:42pm
Kalyan,
IE should not require this fix as it incorrectly wraps floated elements by default. If something appears buggy and you think this is the problem, it is more than likely a hasLayout issue, rather than a clearfix issue.
Try adding "height: 1%;" to whatever element has problems in IE and 9 times out of 10 it will fix it!
Kalyan said...
17.09.2008 @ 03:57am
As far as i have seen, the overflow and the :after technique will work on all browsers except IE. So we will have to use the empty divs for IE
or
We can also apply the clear:both to the footer div tag directly and works like a charm without the need for browser specific fixes.
Jenna said...
30.08.2008 @ 07:15am
Oooh yes, using 'overflow' is another solution. Good find with the sitepoint article btw!
I have used the 'overflow: hidden' option in the past but when creating templates, this clearfix method is generally the only one I trust downloaders won't have problems with (tackling possible scrollbars and disappearing overflowed content).
I may try testing overflow some more and see how high the chances are of these issues cropping up/how to avoid them because it would be a far simpler solution!
Mike Weiss said...
29.08.2008 @ 03:32pm
I found this the other day. Worked like a charm on the website I needed it for. It was so simple I had to chuckle a bit when I found it.
Bob Baker said...
28.08.2008 @ 02:55pm
Great info Jenna! Thanks!
Add your thoughts
Fields in bold are required.
Latest entries
Categories
Who am I?
I am Jenna Smith - a front end web developer who has been busy coding XHTML & CSS for the last 6 years. If you are interested in seeing my work or getting in touch you can do so through my growldesign website.
Josh said...
13.11.2008 @ 09:52pm
Good tip. Been using this with all my floated elements now ever since I saw Dan Cederholm's site using it. Works great for the way I like to code front-ends.