I Ain’t Afraid of No Floats: Part I

Since the latent awakening of popular CSS usage, designers have full on embraced and welcomed a new suite of properties, selectors and techniques for styling their documents. Such added oomph is the bread and butter of their business, and more over, such separation of structure from presentation fosters a greater drive toward Web standards and better development practices in general.

Now, while designers can’t seem to keep from using, experimenting and grasping hold of the latest recommendations fast enough for browsers to support them, developers still seem hard pressed to break out of the conventions that fit within their mold of structural and procedure-esque output. Such conventions, although convenient to use and easy to understand, are ultimately incorrect when semantics are put into question. What’s more is that these conventions also have the potential to detract from the overall crawlability of any given Web site.

It is worth noting the distinction between developers and designers, which deserves an article in its own right. Discussions of labels are rather trival yet useful for the topic at hand. From herein consider a designer to be one who works on the front-end coding of a Web site, the HTML and CSS. Conversely, the developer, in this instance, will be the one who makes use of any scripting or server-side languages. The remainder of this entry calls out those developers who output basic HTML, yet style it with archaic inline, embedded or inefficient practices. However, the techniques described below can benefit any interested party who desires to improve their HTML and CSS usage.

One particular positioning model of CSS that seems to be lost on developers is that of floats and there more intricate sub-positioning models: relative floats and the proper methods of clearing them.

With their temperamental behavior  (or should I say, the popular browsers’ temperamental responses to them), it is no surprise that developers have yet to fully latch on to this highly useful and semantically correct design pattern.

Semantically correct, you say?

Yes. Correct being relative to using incorrect nested table structure, which developers often mechanically output in order to style complex form fields and other non-tabular data. What’s worse is that typically, this table-based structure usually gets regurgitated into a clean CSS design skeleton. This in my opinion is like taking Crayola to a fabulously inked line drawing.

Floating, in its most primitive sense, is being able to remove an element from the document flow and nestling it to the left or right bounds of its parent’s padding area.  Think of floats as being able to indent content to left or right of its outer bounds. With this in mind, floats are much more powerful than just being able to wrap text around images. When used properly and cleverly, floats can be responsible for styling columnular layouts and magazine-style inner HTML content – the latter of these being the visualized output of many developers complex scripts.

Examples , code snippets and solutions for everything float: will be covered in Part II of I Ain’t Afraid of No Floats.