CODEWITHSUNDEEP
cssalignment
serg
serg

Reputation: 111325

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/49274398.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

Upvotes: 2

Views: 1710

Answers (2)

mercator
mercator

Reputation: 28656

Replace

.tag {float:left}

by

.tag {display: inline}

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

Upvotes: 2

hollsk
hollsk

Reputation: 3137

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.

Upvotes: 0

Related Questions