Inline-block parent not collapsing to child width

Question

I'm using inline-block elements instead of floats to have a responsive box grid. When the elements are inline, the wrapper width works fine. When they shift to being vertical, the width of the wrapper expands to the width of its container instead of collapsing to the child width. Is there any hope for this?

Here's the code:

HTML:
<div class="container">
  <div class="wrapper">
    <div class="item item1">
        <img src="http://www.noupe.com/wp-content/uploads/trans/wp-content/uploads/2010/07/th_IMG_1826s.jpg" />
    </div>
    <div class="item item2">
        <h2>Text Div</h2>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
        </ul>
    </div>
</div>

CSS:
img {
    width: 325px;
    height: auto;
}

div.container {
    display:block;
    width: 100%;
    max-width: 1000px;
}

div.wrapper {
    display: inline-block;
    background: #544;
    text-align: center;
    padding: 15px;
}

div.item {
    display:inline-block;
    width: 325px;
}

If I remove the img div, the wrapper works perfectly. I feel like I'm missing something very obvious.

EDIT: Forgot the jsfiddle: http://jsfiddle.net/U3hus/13/

I'm not quite sure what you're trying to do here, what do you mean "when they shift to being vertical"? — Paul Redmond, Dec 19 '13 at 22:41
Sorry for the lack of clarity. Meaning when the width of the browser is less than 800px (resize/mobile) and the inline-block elements stack vertically, the wrapper width no longer collapses. — evankford, Dec 19 '13 at 22:49

score 3 · Accepted Answer · answered Dec 19 '13 at 23:01

3

It's to do with the container being a fixed width and the wrapper not have a width specified. You should specify a width for the wrapper to solve the problem.

.container {
    width: 1000px;
}

.wrapper {
    display: inline-block;
    background: #544;
    text-align: center;
    padding: 15px;
    width: 100%;
}

Rough Example: http://jsfiddle.net/U3hus/13/

answered Dec 19 '13 at 23:01

Paul Redmond

3,276
4
32
52

Ended up doing this plus media queries. Thanks to @stephen-mahood as well. – evankford Dec 22 '13 at 21:20

score 0 · Answer 2 · answered Dec 19 '13 at 22:46

0

Due to the wrapper element having display:inline-block, it will expand to fill the available space. Also as know width, or max-width, is set for the wrapper it will use all the available space. The best way to resolve this would be to use media queries to set a width on your wrapper element

answered Dec 19 '13 at 22:46

Stephen Mahood

1

Thanks so much. I know I can use media queries without much trouble, I just feel like I'm missing something _extremely_ basic here. Why would the wrapper collapse when its children are inline, but not when they move to vertical? I sense that it has to do with the max-width property of the wrapper? – evankford Dec 19 '13 at 22:54
1

This might be sort of similar http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents. – Victor Häggqvist Dec 19 '13 at 23:00

Inline-block parent not collapsing to child width

2 Answers2