Question

<div>
    <ul>
        <li>Caption1</li>
        <li>Caption2</li>
        <li>Caption3</li>
        <li>Caption4</li>
    </ul>
</div>

Basically, the list items are positioned on the same line with the float:left in their style and the div has a 1px border that encircles the ul element:

The only problem, I have to set the width of the outer div manually. If I set the width to a lower value, the content will shrink instead of pushing away the border of the container div:

Any suggestions how to fix this?

Answer 1

Set the div to have display: inline-block (and put it inside another div to maintain the original div‘s block-like attributes)