justify align tagcloud in 100% width div?

hey guys, i'm having a little problem which is probably really easy to solve for you. However i tried a long time now and i have no chance to get it done.

i'm retrieving a tagcloud from a database with different fontsizes. every tag is a link. and all tags have spaces between them.

all tags get printed into a div#tagcloud -> which is 100% in width and has text-align:justify

i wonder what i'm doing wrong in order to align them justified within the 100% div. i want to have more space between certain tags to have the same margin on the left and on the right.

e.g. this is my tagcloud. i made a new line out of every link to have a better structure in this forum here, however actually there is just one space between every link.

<div class="tagcloud">
    <a style="font-size: 40pt;" title="6 posts" class="tag-link-5" href="http://mydomain.com/?tag=cars">cars</a>
    <a style="font-size: 40pt;" title="6 posts" class="tag-link-6" href="http://mydomain.com/?tag=home">home</a>
    <a style="font-size: 15pt;" title="3 posts" class="tag-link-10" href="http://mydomain.com/?tag=animals">animals</a>
    <a style="font-size: 15pt;" title="3 posts" class="tag-link-9" href="http://mydomain.com/?tag=water">water</a>
    <a style="font-size: 25pt;" title="4 posts" class="tag-link-8" href="http://mydomain.com/?tag=health">health</a>
    <a style="font-size: 40pt;" title="6 开发者_如何学Cposts" class="tag-link-7" href="http://mydomain.com/?tag=umbau">music</a>
</div>

any idea how i could solve that to make the tagcloud properly spaced inside of a 100% wide div?

css:

#tagcloud {
    padding:15px;
    line-height:22px; /*depending on the fontsizes set*/
    text-align:justify;
}

thank you

text-align: justify;

This only works for multi-line columns. The last line will not be justified.

live example

In this example you can make the html-screen wider and smaller, and you can notice that the justification works only when the content has multiple lines. I'm afraid that I can't find a proper css-solution for your problem.

However, I've made a hack that you can use, but it only works when the page is wide enough for the tags.

hacked fix for one-line justified content

I am using a liner-span that has 300 pixels padding and only has one whitespace. Because of it's width, it will drop onto the next line and the first line will be justified. With the overflow hidden and the height, the tag-cloud box will always fit in the page. But when the page is too small to fit all the tags next to eachother, they will fall out of view. But it is one way to solve this problem...

If your question is about … Web design and HTML/CSS layout, and your job title is "designer", ask on Doctype.

I had a similar problem. It only worked for me when I added spaces around the word inside the span. For example, like this worked:

<a class="tag-link-5"> cars </a>

whereas this did not:

<a class="tag-link-5">cars</a>