Aligning divs with different dimensions horizontally.

Question

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:

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?

UPDATE: Here is how it looks if I set fixed height for the .tag:

Answer 1

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.

Answer 2

Replace

.tag {float:left}

by

.tag {display: inline}

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