CODEWITHSUNDEEP
htmlcsswidthcontainersfluid
user1752396
user1752396

Reputation: 35

Fluid width for container of inline, non-wrapping elements

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?

Upvotes: 3

Views: 2305

Answers (2)

MassivePenguin
MassivePenguin

Reputation: 3711

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.

Upvotes: 1

user1726343
user1726343

Reputation:

Here is an example where the blocks are inline, the inner-containers have a fixed width, and the outer-container is shrinking to fit.

Upvotes: 0

Related Questions