This post is aimed at all web designers and developers that insist on using the dirty hack <br clear="all"> within their website builds. Most people won’t understand my rage for <br clear="all"> because it takes a certain level of web geekness to fathom what it is and why it’s so god damn unnecessary.
<br clear="all"> is typically used by crap developers who hold no appreciation for web semantics nor accessibility. Ironically these culprits are usually the smart a**** that are the first to point out others mistakes, no matter how minor. They build websites that are both bloated, slow and unstable cross-browser. <br clear="all"> to me acts as the ultimate professional insult to those that have crafted for years, through changing technologies and user demands. <br clear="all"> is like a bird crapping on your freshly washed and polished hatchback, a minor little thing that really p***** me off when I encounter it.
Like the story ‘The Princess and the Pea’, no matter how much preparation and effort you put into something, all it takes is a stupid little pea to annoy you and reduce a potentially relaxing nights sleep to an unexpected search for the very thing that shouldn’t be there in the first place, the <br clear="all">.
Dear Website Developer,
If you need to clear a floated element, please don’t use
<br clear="all">. As a last resort use a simple CSS class on the element you want clearing. In your bloated, unstructured CSS file, which more than likely will be inline, create a class:.clear{ clear:both; }and remember you can add multiple classes to an element, like:
<div class="className className clear"> I'm a clever little developer aren't I </div>As Borat would say, this is ‘unbelievable’!!!
<br clear="all"> <div class="className"> Hack hack hack </div> <br clear="all"> <div class="className"> Hack hack hack </div>
So next time to quickly quack in <br clear=”all”>, think, you’re a dirty little bugger! One last thing, if you write <br clear="all">, it should be <br clear="all" />, but I guess you don’t care do you?
June 16th, 2009 at 11:13 pm
Interesting. I’ve seen my share of terrible web sites, but I’ve never come across this method of clearing before. I suppose I should feel fortunate?
Just a note: self-closing tags, as you mention in your last paragraph, are valid only in XHTML and not in regular HTML.
June 17th, 2009 at 7:38 am
@Lauren Hi Lauren, This clearing method seems common in CSS based layouts with floated elements, and not so in tablular based layouts.
is the title of the post so I thought I’d mention the closing
for xHTML coders, as I presumed web geeks would mention it, good spot though
June 17th, 2009 at 11:53 am
how about
, does it bother you too ?
June 17th, 2009 at 12:09 pm
@dh Of course not, it’s not even in the same context of where my anger resides
June 17th, 2009 at 9:31 pm
[...] My hatred of <br clear=”all”> [...]
June 17th, 2009 at 10:05 pm
I’m 200 percent with you but your CSS code is wrong…
clear: all is not valid, while clear: both is
June 17th, 2009 at 10:08 pm
@Thibaut You’re completely right. In my haste I lost focus and became my own worst enermy. Good spot, I’ll correct it
June 18th, 2009 at 12:02 am
I’ve never noticed or used the method, but I have done my fair share of complex floated layouts that had to use a null spacer class.
I learned about from an older article on A List Apart. The usage has evolved sinc that article was published, but using a non-semantic class is sometimes still necessary with complex nested floats.
June 22nd, 2009 at 1:19 pm
I Use ‘all’ the time, it’s great! What’s the problem?
Regards D.Radburn
P.S Your submit comment button looks funny in IE8, try clearing the elements below it, you could use a line break tag then add a clear attribute with a value of ‘all’. That should do the trick!