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 th

Solution 1:

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.

Solution 2:

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/

Solution 3:

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.

Solution 4:

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