Question

I’m having a little CSS trouble.

I have some div elements structured like the following example. There are a dynamic number of class=”block” divs, each with a fixed width:

<div class="outer-container">
    <div class="inner-container">
        <div class="block">text</div>
        <div class="block">text</div>
        <div class="block">text</div>
        <!-- More "block" divs here -->
    </div>
</div>

My goal is to find a CSS-based solution that will.

1. Display the class="block" divs inline, without them wrapping to new lines.
2. Support a variable number of class="inner-container" divs like the one above, each displayed as its own line.
3. Have the outer container fluidly "shrink-wrap" to match the width of its contents.

Any suggestions?

Answer 1

Not 100% sure if this is what you’re looking for, but it might be a start:

http://jsfiddle.net/r4dEX/3/

By setting each block element to display: inline-block and white-space: nowrap, it should allow the elements to sit alongside each other, but not wrap to a new line if the content is longer than the available space (instead the block will move to a new line).

Each inner-container will display on its own line (display: block is default behaviour for a div).

Setting the outer container to display: inline-block will cause it to ‘shrink wrap’ to fit its content.