Shrinkwrap div around muliple tiles

Question

I have been trying to get a div to fit its content here. I have tried many shrinkwrapping methods, but none have worked.

<div class="outer">
    <div class="cont">
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
    </div>
</div>

Both

display: table;

and

display: inline-block;

have failed when applied to the inner div.

I would like the inner div to be centered in the outer div, but have the contents of the inner be left aligned.

@IvanIvanov Yes, but I need the inner div's width to fit the content, not the tiles — , Jul 19 '14 at 20:05
Similar or same question was asked a while back. The only solution I could come up with was to use media queries to clear the floats and to make the table shrinkwrap its contents. Here's the post: http://stackoverflow.com/questions/24728772/centering-a-variable-width-grid-while-aligning-its-elements-to-the-left. And, here's a fiddle for that post: http://jsfiddle.net/5hWXw/. — DRD, Jul 19 '14 at 20:44
I've posted my comment as an answer. You can give credit via that. Thanks. — DRD, Jul 19 '14 at 21:22

gkunz · Answer 1 · 2014-07-19T20:50:54.680

It's hard to answer your question here as it's not 100% clear to me what you're trying to achieve. When you say you'd like the inner div to be centered is implying that your inner div will have a fixed width compared to the outer div having 100% width if I get you right.

display: table is not the right choice here for sure. You most likely use this to make child elements the same height, distribute them equally automatically or do vertical alignment (top, middle, bottom).

If you just want to center your inner div and give it a fixed width I'd go with the auto margin approach.

Set a max-width on your inner div so you can limit it at a certain width and also set left and right margin to auto.

Is that what you're trying to achieve? http://jsfiddle.net/ZnER7/1/

UPDATE

As per the comment I think I now know a bit better what you'd like to do :-) However, if you're concerned about the fact that your inner div is expanding as soon as child nodes are wrapping then I'm afraid there is no proper solution.

If you look at this example: http://jsfiddle.net/ZnER7/3/

You can see that the solution is using inline-block elements. This way you can center your inner container as it's getting treated like text. The text-align: left of the inner container will make your images align to the left. However, when your inner container gets too small to fit all child nodes and they start to wrap then the inner container is still trying to be as big as possible. I think this is the default behavior of text overflow and you can't change that. You can also look at the example where I've put in very long words and see that the behavior is the same.

Cheers Gion

I guess I need to clarify. What I want is for the inner div to shrinkwrap horizontally to the tiles, changing width when the number of tiles in a row changes. I also want the inner div centered in the outer div. — , Jul 19 '14 at 19:57
Thanks for updating. I realized it was somewhat futile. The best anyone has done is DRD in his comment on the question. http://jsfiddle.net/5hWXw/ — , Jul 19 '14 at 21:17

score 0 · Answer 2 · answered Jul 19 '14 at 20:23

0

Your question doesn't seems to be clear, but what I perceived is you want your inner div to stretch to full content. Please check this jsfiddle, removed display: table; from inner div

answered Jul 19 '14 at 20:23

Ashish Balchandani

1,228
1
8
13

This doesn't shrink to fit the contents. – j08691 Jul 19 '14 at 20:28

score 0 · Answer 3 · answered Jul 19 '14 at 20:29

The .outer div must be set to block. The .cont div can only be centered with a defined width, and then using margin: 0 auto. The zero is optional, the left and right margins need to be auto though.

I made a jsfiddle for you: http://jsfiddle.net/z9xCg/

I used font-size: 0; on your .cont class so as to remove whitespace for inline-block elements such as <img> tags.

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Similar or same question was asked a while back. The only solution I could come up with was to use media queries to clear the floats and to make the table shrinkwrap its contents. Here's the post: Centering a variable width grid while aligning its elements to the left and here's a fiddle for that post: http://jsfiddle.net/5hWXw/.

see jsfiddle;

edited May 23 '17 at 11:50

Community

1
1

answered Jul 19 '14 at 21:21

DRD

5,557
14
14

Shrinkwrap div around muliple tiles

4 Answers4