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

Question

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.

HTML:

<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;
}

I smell with 2 rows/1 col or display: table(-cell)
– biziclop Nov 06 '11 at 19:31 — biziclop, Nov 06 '11 at 19:31

score 2 · Answer 1 · answered Oct 03 '11 at 06:48

2

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.

answered Oct 03 '11 at 06:48

Joe

290
3
9

It seems a bit cumbersome having to define this for each element. Aren't there a simpler solution? – CheeseSucker Oct 03 '11 at 14:07
I implemented this for a similar question: http://stackoverflow.com/a/8987026/405015 – thirtydot Jan 24 '12 at 12:55

score 1 · Answer 2 · edited Nov 07 '11 at 15:12

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/

score 0 · Answer 3 · answered Aug 21 '13 at 20:25

0

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.

answered Aug 21 '13 at 20:25

JMB

1,809
2
14
11

score -2 · Answer 4 · edited Jul 31 '12 at 11:28

-2

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

edited Jul 31 '12 at 11:28

Nikola K.

7,093
13
31
39

answered Oct 03 '11 at 05:13

Song

1
1

Fixed positioning makes no sense at all and is not what is intended, additionally `margin: auto` does not help either. – jnns Apr 09 '13 at 12:15

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

HTML:

CSS:

4 Answers4

Linked