Question

If you use a <span> tag for your container and set it to display: inline-block, then the container will shrinkwrap the contents, unless the contents wraps onto multiple lines, in which case the width of the container simply defaults to 100%. Is there any way to shrinkwrap wrapped contents? Here’s my code (http://jsfiddle.net/T8uGm/):

HTML

<span class="wrapper">
    <a href="#" class="block"></a>
    <a href="#" class="block"></a>
    <a href="#" class="block"></a>
    <a href="#" class="block"></a>
    <a href="#" class="block"></a>
    <a href="#" class="block"></a>
    <a href="#" class="block"></a>
</span>​

CSS

.block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
}
.wrapper {
    display: inline-block;
    border: solid 1px black;
}

Answer 1

try this css:

.block {
        display: inline-block;
        min-width: 100px; /* The fix minimum width of span/div */
        width: 19.5%;  /* Depending how much box in 1 row. Exm: 5 block = 20% (19.5% to give space) */
        height: 100px;
        background: blue;
    }