• Home Page
• Computer Blog
• Chess Blog
• Exercise & Diet Blog
• Theology Blog
• Islamic Terrorism Blog
• Contact Us

On CSS Floats

CSS Floating

The float property was never intended as a means for laying out columnar pages. It was intended to replace the align attribute of the img and table tags, as well as a means for wrapping text around floating boxes of text or other content. While we all tend to abuse the float property - sometimes to convoluted excess - it's sometimes good to step back and look at floats deployed in a manner more in keeping with its intended use. CSS Hog Heaven 'the holy gruel' attacks the notion of a Holy Grail layout - as defined by many CSS pundits - and addresses the issues of source ordering, min-max width, and flexible width. The other component of the 'Holy Grail', equal height columns, is irrelevant. What this technique adds to the mix is stability and a robustness that is impossible with the various other Holy Grail (or otherwise religious) techniques being suggested in the CSS community.

If you get real creative, some very interesting designs can be made - perhaps an upcoming PVII Page Pack will explore this to another level

On CSS Zealotry

Special Conditional Comment Targeting for IE7 Beta

Ruminating...

CSS has properties that are intended to allow developers to create mult-column layouts. Those properties are supported by all browsers except for IE Windows (and Mac). IE7 will not support those properties. The properties are:

• display:table
• display:table-row
• display:table-column
• display:table-column-group
• display:table-cell

Try these properties in a browser that supports them and you will see a layout as bulletprooof as only a table can currently offer. Here be an old example I did last year:

http://www.projectseven.com/csslab/testing/display_table

The most widely embraced method used to today for CSS layouts is the float property. The float property was never designed to be the means for creating multi-columnar, table emulating layouts. It is, in essence, a hack. And it's a hack that often requires complex workarounds to behave consistently in the most widely-used browsers. Can it be done effectivey? Sure. But it's not the modern way of doing things. It's as much a transitional approach as tables are.

But alas, people take this stuff much too seriously.

There are newbies who have the time and the aptitude to learn the ins, outs, and pitfalls of CSS DIV layouts. But as someone who has to support, for a living, both the adept and the challenged, I can guarantee it's not as easy as some people would have you think. When something is hard to grasp there's usually a reason.

We've spent years studying and refining techniques. PVII was a CSS positioned table-less web site long before such luminaries as A List Apart made the switch. The key to embracing table-less design is in accepting it as one of several transitional methods one can use while waiting for the time when the majority of civilians are using browsers that support more appropriate CSS layout properties. I rarely hear CSS current practices referred to in a realistic manner.

When the average person reads statements like "ditch tables and do it the right way" they are forced to make a choice. They can believe that there is an actual right way, but could wind up choosing the wrong way - with respect to their current level of expertise.

I read a comment on the IE blog yesterday, in response to Microsoft's announcement that display:table would not be making it into IE7. The chap essentially ranted about his life being ruined and the internet being set back to the dark ages. While this is a radical example, some of the sentiments I read in newsgroups and on mailing lists are not so different in essence. So, I guess people can choose to follow the passionate or zealous party line or they can step back and try to understand what this all means in good, reasonable, and pragmatic terms.

Always choices to make...

IE7 Beta

More on IE7 Beta

Special Conditional Comment Targeting for IE7 Beta

Microsoft has set up the IE7 beta to answer to the version vector 7.0b - allowing us to apply fixes for only the beta. Conditional Comments using this vector will not be read by the final, shipping version of IE7.

IE7 Beta 2 Preview: Bug demos and workarounds