Proposed Guideline 1: Any HTML or CSS construct which breaks arbitrary nesting is dangerous.
Proposed Guideline 2: Any HTML or CSS construct which can be broken by arbitrary nesting is dangerous and should be avoided in an HTML template. (This guideline is basically impossible to completely satisfy, but some constructs are easier to break than others.)
Observation 1: The CSS clear attribute breaks arbitrary nesting.
Observation 2: The CSS float attribute can be broken by arbitrary nesting.
Conclusion 1: The CSS clear attribute is dangerous.
Conclusion 2: The CSS float attribute is dangerous and should be avoided in an HTML template.
Discussion: When developing a complicated web site, one often resorts to the use of an HTML template. Templates usually work by defining of one or more “insertion points” for HTML content for a particular page. An ideal template is designed defensively: no matter what content is put into an insertion point the template layout remains intact. (Alternatively, and this is what happens in practice, one must control what content is allowed to be put into an insertion point—but by avoiding certain constructs in your template you can be more liberal with your allowed content.)
Consider a template for a blog which uses a two-column layout where the sidebar column is positioned to the right using the CSS float:right attribute. Now consider a blog item which wants to contain a picture aligned to the right side of the content column using the float:right attribute. If the picture is the vertically largest item in the blog entry, the ubiqutous comment link must be marked with the clear:right attribute in order to appear below the picture. However, this clear attribute will also put the comment link below the bottom of the sidebar column.
Therefore, for this (and other, aesthetic reasons) I eschew the use of CSS float-based multi-column layouts in HTML templates. In fact, although it is possible to use the CSS position attribute to create multiple column layouts, I find a table (*gasp!*) to be the easiest, most sensible solution right now. (In the future, perhaps I will look to the W3C’s Multi-column layout in CSS proposal.) The use of a table-based HTML template allows one to use float and clear in insertion points with abandon.
This wouldn’t be a problem if the clear attribute applied only to the most recent float, as opposed to all floats. (This change would effectively require all floats to contain a subsequent clear, visually required or not, but this is a good habit to get into anyway).
Recent Comments