Positioning whole elements side by side

Question

I have some DIVs with contents inside. I want to display them side by side and if there is no space, I want to break the whole div, so the contents don't go to a new line alone.

I've made this example of what happens.

Here is a screenshot from the link above.

And here is the expected output

Answer 1

How about http://jsfiddle.net/qB225/15/? That adds

.item {
    ...
    white-space: nowrap;
}

Answer 2

http://jsfiddle.net/qB225/21/

.master
{
    width: 160px;
}

.item
{
    display:inline-block;
    font-size: 11px;
    padding: 2px 2px 2px 0;
}

.item { display:inline; } /* DO NOT REMOVE, FOR IE */

.item a
{
    text-transform: uppercase;
}
​

Answer 3

Put non-breaking space between your links and spans.

http://jsfiddle.net/qB225/22/

Answer 4

If you want them to only wrap as pairs you need to do two things. First change your html so that you group your item divs in pairs of two:

<div class="master">
    <div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
    </div>
    <div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
    </div>
</div>

And then add a float to the grouping divs:

.master > div{ float:left; }

Answer 5

Try using "inline-block" as follows:

.item
{
  display: inline-block;
  font-size: 11px;
  padding: 2px 2px 2px 0;
}

Thanks.