Why It s Bulletproof

Why It's Bulletproof

For the very same reasons that table-based layouts aren't bulletproof, let's remind ourselves why flexible CSS-based layouts are.

The first reason: less code. Instead of tying borders, background, and spacing to the markup using nested tables, you can easily structure them in a multicolumn layout using just a few simple <div>s rather than using CSS for the position and style of each column. Even with the extra (but necessary) <div>s added for static-width gutters and/or Sliding Faux Columns (in three-column layouts), there is still far less markup than the nested table approach.

Second, you have a more easily maintainable codebase. Because the design details are held in the style sheet, the markup becomes easier to read, and making changes to the appearance of the layout is as easy as updating a few style rules.

Using the float property in CSS, you're also able to stack the content in a more optimal order when dealing with multicolumn layouts and put the important content first in the markup. This is benefit for those browsing with screen readers, text browsers, and other devices that do not support CSS.

And finally, you're giving the user an additional facet of control when you deliver a flexible, fluid layout. Readers will be able to widen the layout if they wish, or shrink the width of the window if they're viewing on a small screen. This extra level of control is yet another way to bulletproof your design and make it adaptable to as many environments as possible.