A little over a year ago I would have never considered using CSS for positioning. In my mind it always produced unexpected results when viewed in different browsers. After a bit of pushing and enlightenment from Randy and Steve H., I’ve been warming up to the idea.

A recent project seemed like a strong candidate for the use of semantic markup and CSS. This was a departure from my world of certainty, where tables were used to create structure. However, just knowing (X)HTML and CSS wasn’t enough. Based on someone’s recommendation, I bought two books by Dan Cederholm. While a worthy investment and a very informative read it still left me with some questions.

The books served as excellent models for the use of semantic markup and the separation of design and content. The only disconcerting thing was reading this in Web Standards Solutions:

We’re not going to argue either side, but instead state that using a table is sometimes the best way to achieve certain form layouts—especially complex forms that involve multiple controls like radio buttons, select boxes, etc. Relying solely on CSS to control the layout of complex forms can be frustrating, and often involve adding extraneous <span> and <div> tags, with more code bloat then that of a table.

What happen? Somebody sent up us the bomb. In other words, this was the last thing I wanted to read. Where is my knight in shining armor, my holy grail? The CSS can conquer anything, let me show you how attitude. I have to hand it to the guy, he didn’t just say that it’s better to forego certain formatting for the sake of reserving tables only for tabular data.

This leads to me to the issue of trying to overcome the problem of replicating certain levels of formatting, traditionally only achieved through the use of tables. Foremost, and probably the only unsolved issue is vertical alignment. Yes, I know there is an element for it, but it’s not recognized in IE, so STFU K THNX. It’s disgusting how many sites promote CSS hacks as a solution for this. How can someone tell me that a situation where a hack has to be used is more acceptable then using equivalent, compliant HTML.

It seems that my options are to:

1. Use compliant CSS
2. Use compliant CSS and a hack
3. Use a table
4. Not do it at all

I can’t use option 1, it wouldn’t render in 90% of the browsers out there (e.g. IE). Option 2 seems like the way to go, except that it doesn’t guarantee anything, and still fowls up (e.g. Mac IE). 3 is appealing, and would produce consistent results in just about every single browser out there, however it defeats the purpose of separating style from markup, and there is always someone out there looking to take you to task for it. 4 isn’t acceptable, there is no place for telling a client that they can’t have something in the middle of a page or element because CSS won’t do it.

My choice, a combination of the above. I’d really love to say screw it and use a table. It does exactly what I want, in arguably a lot less code. With an IE hack and Opera fix, the CSS becomes far more complex, and it still won’t work 100% of the time. In the case of putting the main page content dead center in the screen, I’d have to say I’d certainly use a table now. Thankfully I’m not faced with that decision. What I’m working on now calls for a string of text to be vertically aligned in a parent element of known height. The string can occupy one or more lines, which makes it a little more complex. My choice here, fake it. It appears to be the only viable solution aside from breaking down and using tables. It was actually the solution that Randy proposed about a week ago.

It’s annoying to use a compromise. I bet secretly a lot of other developers feel the same way and that’s why there is so little written about the issue. When I asked google about this, it returned mostly pages describing the vertical-align attribute, a huge number of hacks, and a bunch of noise. What I didn’t see was someone rationalizing what the realistic solutions were.

This situation clearly exemplifies that CSS was not designed to completely take over representational attributes. It seems like many people treat positional CSS like a secret waiting to be unlocked, which is the wrong approach when trying to get people to embrace something. In order for mass adoption the standard should focus on a complete set of tools that are easily implemented, the moment hacks and workarounds are involved credibility is lost and confusion arises.

Until CSS is endowed with at least the same level of control that standard HTML provides, we all are going to be stuck in a mix of compromises.