Выравнивание div с разными размерами по горизонтали

Question

У меня есть облако тегов с разными размерами шрифта.

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

И это выглядит так:

альтернативный текст http://img69.imageshack.us/img69/5120/49274398.gif

Теперь мне нужно обернуть каждый тег в отдельный 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>

Что ставит их повсюду. Как сделать так, чтобы они выглядели на первой картинке?

альтернативный текст http://img26.imageshack.us/img26/7355/12644278.gif

ОБНОВЛЕНИЕ : Вот как это выглядит, если я установил фиксированную высоту для .tag: альтернативный текст http://img710.imageshack.us/img710/3385/59552565.gif

Answer 1

Заменить

.tag {float:left}

от

.tag {display: inline}

Или была какая-то другая причина, по которой вы перемещали все теги?

Answer 2

Возможно, увеличьте высоту строки или вертикальное заполнение меньшего размера шрифта. Причина этого заключается в том, что меньшие обертывают вокруг более крупных, как предусмотрено в спецификации, поэтому, увеличив размер области более мелких элементов, обертку следует предотвратить.

Кроме того, есть ли необходимость в первую очередь использовать теги? Казалось бы, просто поместить их все подряд в первый пример как обычно.