Positioning whole elements side by side

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开发者_Python百科.

Here is a screenshot from the link above.

csspos http://img709.imageshack.us/img709/6799/csswo.png

And here is the expected output

cssposright http://img826.imageshack.us/img826/8530/csse.png

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

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

Put non-breaking space between your links and spans.

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

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;
}
​

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; }

Try using "inline-block" as follows:

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

Thanks.