Aligning divs with different dimensions horizontally

I have a tag cloud with different font sizes.

<div>
    <a style="font-size:15px;">tag1</a>
    <a style="font-size:10px;">tag1</a>
</div>

And it looks like this:

alt text http://img69.imageshack.us/img69/5120/492743开发者_运维问答98.gif

Now I need to wrap each tag into its own div:

    <style>
        .cloud {float:left}
        .tag {float:left}
    </style>
    <div class="cloud">
        <div class="tag"><a style="font-size:15px;">tag1</a></div>
        <div class="tag"><a style="font-size:10px;">tag1</a></div>
    </div>

Which puts them all over the place. How to make them look like on the first picture?

alt text http://img26.imageshack.us/img26/7355/12644278.gif

UPDATE: Here is how it looks if I set fixed height for the .tag: alt text http://img710.imageshack.us/img710/3385/59552565.gif

Replace

.tag {float:left}

by

.tag {display: inline}

Or was there some other reason why you were floating all the tags?

Perhaps increase the line-height or vertical padding of the smaller font-sizes. The reason it's happening is because the smaller ones are wrapping around the larger ones as designed in the specification, so by increasing the size of the area of the smaller elements, the wrapping should be prevented.

As an aside, is there any need to float the tags in the first place? Just putting them all in a row as normal in your first example would seem to have the same effect.