Wrapping an inner 'div' tightly by an outer 'div'

Question

#main .thumbBorder {
    background-color: #e1e1e1;
    padding: 2px;
    border: solid 1px #cfcfcf;
    margin: 14px;
}

#main .thumbnail {
    background-image: url('http://images.idealer1.com/getimage/188/4937261.jpg');
    height: 125px;
    width: 188px;
}

<div class="thumbBorder">
    <div class="thumbnail"> </div>
</div>

What would be the proper way to get the outer div thumbBorder to wrap tightly around the inner div thumbnail?

Right now, the outer div thumbBorder is expanding to the limits of its entire outer content block.

Answer 1

The only way to have a block element shrink to fit its contents is to give it a float. If you need that behavior, and also need to center, check out display: inline-block

Answer 2

float: left;

or

float: right;

or also

display: inline;