f1vlad's Journal: Do not forget display:table-cell

The last -based website that I did was tomswebplaces.com, which I believe was in 2003. A lot has changed since, both on the web and the way I write HTML. But today I remembered usage once again; that is, using for layout and design, rather than tabular data.

The task at hand: to align text vertically in a div. At first quite trivial -- div inside div, first position:relative, second position:absolute -- until it comes to text wrapping. When text wraps to the next line, there's more white space above the box than below. I could not believe that there isn't a native solution for this. Few google queries revealed long forgotten display:table-cell, combined with vertical-align:middle achieves desired behavior. It works perfectly on all standard compliant browsers; however, IE6 and IE7 that do not support display:table-cell.

Below is the way I solved IE6/IE7 problem via adding extra wrapper around the block that is to be vertically aligned. This wrapper is used to imitate vertical alignment in these two non-compliant browsers, while proper layout is display in all, dare I say, normal browsers; it isn't perfect, but it works.

see HTML source code

In a couple of weeks, you will see how I utilized this method in production environment on slashdot user pages.