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:

Answer 1

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;}


  BIG
  SMALL