Question

In my application I have tags that can be from 5 to 15 characters. By that reason the tags width differ, but the surrounding divs increases with the parents width, not the content.

What should I put in the CSS to make the divs width adapt to the width of it’s content?

Thanks in advance!

HTML

<div class="tag">
    <a href="#">
        <span class="content">Test album</span>
    </a>
    <a href="#" class="album">X</a>
</div>

CSS

div.tag {
    background: red;
}

Test case: http://jsfiddle.net/T4XJ3/1/

Answer 1

The <div> element has display:block, so it will always take the full width of their container.

You can make them “flexible” by using display: inline-block (demo).

Is this what you’re looking for?