Shrink-wrap / Shrink-to-fit a div to reflowed floated divs in css

http://jsfiddle.net/zEcn3/12/

I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.

The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.

H开发者_如何学CTML:

<div class="wrapper">
    <div class="content">
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
    </div>
</div>

CSS:

.item {
    float: left;
    width: 70px;
    border: 1px solid black;
}

.content {
    display: inline-block;
    border: 1px solid black;

}
.content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

A friend figured it out for me, the answer is to use media queries.

@media (max-width: 1080px) {
    #main {
        max-width: 640px;
    }
}

So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.

I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.

The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.

So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".

Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/

I found the answer here: http://haslayout.net/css-tuts/CSS-Shrink-Wrap

It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.

Try to use margin:auto to the container <div> and set a fixed position.