Vertically align floating divs

Question

I am trying to float two divs with different font-sizes. I can't find a way to align the text on the same baseline. Here is what I have been trying:

<div id="header">     <div id="left" style="float:left; font-size:40px;">BIG</div>     <div id="right" style="float:right;">SMALL</div> </div> 

Answer 1

Ok, firstly the pure CSS way. You can get vertical alignment to the bottom using relative+absolute positioning like this:

<div id="header">   <div id="left">BIG</div>   <div id="right">SMALL</div> </div> <style type="text/css"> html, body { margin: 0; padding: 0; } #header { position: relative; height: 60px; } #left { font-size: 40px; position: absolute; left: 0; bottom: 0; } #right { position: absolute; right: 0; bottom: 0; } </style> 

You may have some issues with this, like IE6 behaviour as well as z-index issues with things like menus (last time I tried this my menus appeared under the absolute content).

Also, depending on whether all the elements need to be absolutely positioned or not, you may need to start doing things like specifying the height of the containing element explicitly, which is usually undesirable. Ideally, you'd want the container to auto-size for its children.

The problem is that the baselines of the different-sized fonts will not match up and I don't know of a "pure" CSS way of doing this.

With tables however the solution is trivial:

<table id="header"> <tr>   <td id="left">BIG</td>   <td id="right">SMALL</td> </tr> </table> <style type="text/css"> #header { width: 100%; } #header td { vertical-align: baseline; } #left { font-size: 40px; } #right { text-align: right; } </style> 

Try it and you'll see it works perfectly.

The anti-table crowd will scream blue murder but the above is the simplest, most browser-compatible way (particularly if IE6 support is required) of doing this.

Oh and always prefer using classes to inline CSS styles.