CSS vertical aligning

Question

I have some page layouts that require multiple columns and all of their content needs to be vertically aligned to the top since different columns will have more/less text than others.

I did the layout using the table-cell property so I could use vertical-align, which doesn't work with blocks as far as I know, but I just realized that the display: table-cell property doesn't work with IE 7 or below, which is a big no-go.

Anybody know how to vertical align in divs, or a fix for <= IE7 ?

Answer 1

It sounds like you want specifically-sized floating divs. Something like this:

<div id="wrapper">
  <div id="left">Test</div>
  <div id="center">more text</div>
  <div id="right">Even more</div>
</div>

And the CSS:

#left { float: left; width: 200px; }
#center { float: left; width: 400px; }
#right { float: right; width: 200px; }

Answer 2

I think the answer above is a good idea, or you could use something like a jquery plugin.

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/