CSS and Vertical Alignment

@ 8:53AM EST 12.6.2006

Even with all the 'warm fuzzies' that designers and developers alike get by keeping our markup separate from design, conforming to web standards, and getting cross-browser compatible CSS driven layouts out the door, there are still some days when we want to curse the CSS gods and go back to the comfort and predictability of tables. And of course it's always raining on those days. Just like yesterday. Even so, I found two viable solutions to the vertical alignment problem that has been plaguing us CSS geeks from the beginning.

Comments (6)

>> This doesn�t work in IE 6 and 7 unless the comment is above the doctype, which I'm pretty sure causes quirks mode in those browsers. - paul
>> Good catch, Paul! I have updated both my post and the code to use the # IE hack as opposed to the * html hack. I have also removed the comment at the top of my html. That seems to do the trick. Thanks! - Colleen
>> Mo' better. Now however IE 6 & 7 give lengthy horizontal scroll bars. For IE hackage I prefer conditional comments - though for a tutorial perhaps not as brief. - paul
>> Hey Paul, I've fixed the horizontal scroll issue in IE by simply modifying which left positioning is negative (siteTableCell is now #left: -50%; while contentContainer is #left: 50%;) Again, updates in blog post & live html. Unfortunately this same method doesn't work for top positioning to solve the unnecessary vertical scroll. I'll keep you posted as soon as I find a solution. Thanks! - Colleen
>> you go girl. :) - paul
>> thanks for this hack!!! :) - pbmax

Your Name:
Your Email
Your Comments: