Vertically align floating divs

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>

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.

edit just re-read the questions and saw one box needs floating to the right... so the below doesn't work... but might be adaptable

First of all, you should be using spans rather than divs as the content is going to be inline to finish with. I don't know the ins and outs of why, but this means your elements will behave a bit friendlier across browsers.

Once you've done that, this works a treat, even in ie6 and 7:

#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora  fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}

<div id="header">
  <span id="left">BIG</span>
  <span id="right">SMALL</span>
</div>

You can do this using line-height but it only works on inline elements and if the text does not wrap.

<div id="header" style="overflow:hidden;">
    <span id="left" style="font-size:40px;">BIG</span>
    <span id="right" style="line-height:48px;">SMALL</span>
</div>

I changed the div to span. If you want to keep div just add display:inline to your style.

<div id="header" style="overflow:hidden;">
    <div id="left" style="font-size:40px;display:inline;">BIG</div>
    <div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>