The clear fix 10.08.2008 @ 06:51pm

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

Comments have been disabled.

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.