Forget You Mr. Clear

I am always in awe of the talented and clever individuals who drive the web design/development movement. In 2006 I read an article about the coming web 3.0 and all of the greatness that it entails. Web 3.0 will not represent the dramatic change from the static pages of the webs origins to the database driven, dynamic monster sites that we frequent today but it will represent a fundamental change in the way we search. Web 3.0 is the semantic web. It is a network that understands the nuances of human language and enables us to search and identify valid, useful information in a sea of search results. Microsoft has an ad campaign for their Bing search engine that illustrates the frustration many people experience while attempting to search. Search engines now deliver “cloudy” results that are peppered with useless information, obscuring the valid results. It can be theorized that part of this problem is the idea that search engines index information, but really have no deep understanding of the content that is being indexed.

It was not long ago that HTML pages were a thick soup of content and presentation. In today’s modern times they are getting much more organized, but there are still unnecessary tags that must be used to “hack” the site into behaving or to properly accomplish a certain visual. Floats are one of the problems that introduce extra markup into the page, muddying up the beautiful content. Since the beginning of my web design days, I have been using an extra div to clear my floats. Just this morning I learned that a break (br) tag is an acceptable way to clear a float. This made me smile a little bit as the break tag would never contain content so it is an appropriate alternative to the div for this situation. Moments later my mind was blown when I was taught that we can skip the extra markup if we add a simple “overflow: auto” to the parent container of our floating elements.

Beautiful. Style where it belongs, in the style sheet.

Read more about this wonderful technique at http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

My only regret is that this technique has been understood for over a year and I am only just now getting on board.