css - container div shrink-to-fit contents

Question

I'm hitting a wall here, hope someone can help.

I've got a container div with a black background that I need to dynamically "shrink-to-fit" the contents within it. I've tried display: inline-block and several other usual fixes for this, but to no avail.

The content inside is a large number of div boxes that are flush:left. This number of boxes can change dynamically each time the page is loaded.

Here's my css:

#blackboard {
    background-color: black;
    padding: 2px;
    max-width: 580px;
    display: inline-block;
}

.box {
    height: 40px;
    width: 34px;
    border: 1px solid black;
    margin: 1px;
    float: left;
    background-color: White;
    display: inline-block;
}

And my HTML:

<div id="blackboard">

<div class="box" id="topbox1"></div><div class="box" id="topbox2"></div><div class="box" id="topbox3"></div><div class="box" id="topbox4"></div><div class="box" id="topbox5"></div><div class="box" id="topbox6"></div><div class="box" id="topbox7"></div><div class="box" id="topbox8"></div><div class="box" id="topbox9"></div><div class="box" id="topbox10"></div><div class="box" id="topbox11"></div><div class="box" id="topbox12"></div><div class="box" id="topbox13"></div><div class="box" id="topbox14"></div><div class="box" id="topbox15"></div><div class="box" id="topbox16"></div><div class="box" id="topbox17"></div><div class="box" id="topbox18"></div><div class="box" id="topbox19"></div><div class="box" id="topbox20"></div><div class="box" id="topbox21"></div><div class="box" id="topbox22"></div><div class="box" id="topbox23"></div><div class="box" id="topbox24"></div><div class="box" id="topbox25"></div><div class="box" id="topbox26"></div><div class="box" id="topbox27"></div><div class="box" id="topbox28"></div><div class="box" id="topbox29"></div><div class="box" id="topbox30"></div><div class="box" id="topbox31"></div><div class="box" id="topbox32"></div><div class="box" id="topbox33"></div><div class="box" id="topbox34"></div><div class="box" id="topbox35"></div>

<div style="clear:both;"></div>

</div>

Easier to see it here though:

http://jsfiddle.net/pbspry/L8e34tvx/

Basically just need the container div (black) to wrap so that there is equal blackspace (just a few pixels) around the entire grid, even if the window is resized or the browser's zoom settings are increased/decreased.

Thanks for any help!

UPDATE

Looks like this can't really be done without javascript, which I don't want to use for a number of reasons.

The easiest fix seems to be to select a certain number of boxes per row, and then put a "clear:both" after that number. This forces a line break and then the outside div properly shrinks to fit (even at different browser zoom levels).

Answer 1

Your container already has a shrink-to-fit width, because of display: inline-block.

The algorithm is defined in the spec as

1. Calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur
2. Also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm.
3. Find the available width: in this case, this is the width of the containing block minus the used values of margin-left, border-left-width, padding-left, padding-right, border-right-width, margin-right, and the widths of any relevant scroll bars.

Then the shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width)

In your case,

• The preferred width is 100 * 38px = 3800px
• The preferred minimum width is 38px
• The available width is much probably something between 38 and 3800px.

Then the shrink-to-fit width would be the available width. And that would be clamped with max-width: 580px.

AFAIK there is no way to achieve your desired behavior without JS. And probably the reason is that a small change could push some elements to other lines and produce a big change in the container's width.