Expand container div with content width

Question

I have the following structure in my application:

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

Each child div has a known fixed width, but the application allows more of them to be inserted in the child_container div.

What I'm trying to do is to have the container div expand horizontally when needed, given the total width of the child container.

This is what happens currently:

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

If I set the child_container div width to a fixed value, I can get it to expand horizontally past the container div, which works despite being a bit ugly:

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

However, that requires recalculating it whenever a new child is added.

Is there a way to do this without using fixed widths for child container, in a way such that the end result is

+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+

Thanks.

http://jsfiddle.net/8XGqs/1/ illustrates the equivalent of the ascii art above better, I think. Just added width:100% to #container. — Andre, May 24 '11 at 19:59

score 35 · Answer 1 · answered May 02 '12 at 18:09

35

Even easier:

<style>
    #container{ display: inline-block; }
</style>

answered May 02 '12 at 18:09

Nate Barr

4,640
2
25
21

3

Easy to handle per this [answer](http://stackoverflow.com/questions/6544852/ie7-problem-with-display-inline-block) – Nate Barr May 21 '12 at 19:53

score 33 · Accepted Answer · edited Oct 12 '14 at 12:08

33

Something like this should work:

#container, #child_container, .child { 
    position: relative; 
    float: left;
}

edited Oct 12 '14 at 12:08

pradyunsg

18,287
11
43
96

answered May 24 '11 at 19:04

wajiw

12,239
17
54
73

3

@thirtydot because of how some browsers render the html. without telling it the position some browsers won't use the sizes of 'child' elements to increase the size of the containers – wajiw May 24 '11 at 19:13
1

This is good... although you may not need the `position:relative;` – Jason Gennaro May 24 '11 at 19:15
1

@wajiw: Which browsers? I assume you're talking about some *really old* browser. – thirtydot May 24 '11 at 19:17
3

@thirtydot yeah it's more a habit of mine working with IE6/7 =) not as relevant now but it's a good practice for containers. – wajiw May 24 '11 at 19:30
1

Can you have a look at http://jsfiddle.net/8XGqs/1/ ? It doesn't seem to work on that example, even though everything has "float:left;". – Andre May 25 '11 at 16:54
1

@Andre I see what you're looking for now. I've updated your code to fix the problem. Using 'white-space:nowrap;' on the container, removing floats on the child and adding 'display:inline-block;' will create a scroll bar when you don't want the children to wrap. – wajiw May 25 '11 at 18:17
1

Thanks, that does it! Do you know why it added the spacing around the elements despite margins, paddings and borders being all set to 0? – Andre May 26 '11 at 11:44
1

Not sure about that. Might have something to do with the jsfiddle parsers. Can you hit the answer check if this helped you? – wajiw May 26 '11 at 13:55
1

Done.I tested the solution in chrome and firefox, and it shows exactly like in jsfiddle. – Andre May 26 '11 at 14:15
1

hmm...not sure why that's happening. if you can put a fixed width on that container it would fix it but if those 'children' are dynamic you might have to keep playing with the css – wajiw May 26 '11 at 14:44
1

Fixed it with PatrikAkerstrand's solution at http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Andre May 26 '11 at 14:59
1

Edited your answer for clubbing the same CSS rules! – Om Shankar Jul 05 '13 at 09:30

score 13 · Answer 3 · edited Jul 05 '13 at 09:26

The parent container won't grow when a child element is added.

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

but we can avoid the rendering of new one on the next line by using css3 flex box. The sample is placed the below mentioned path

  .products{
            display: -webkit-flex;
            -webkit-flex-flow: row;
            /*-webkit-justify-content: center;*/
        }
        .products > div{
            padding: 0 4em;
        }

The result will look like this:

+--- child_container ----+|
| child1 child2 child3  ch|ild4 child5  
|                         |
+------------------------+

but the width of container doesn't grow, do it? – alumi Jul 27 '18 at 04:12 — alumi, Jul 27 '18 at 04:12

score 2 · Answer 4 · answered Jul 05 '18 at 13:34

2

The modern solution today would be

#child_container {
    display: flex;
}

Because flex-wrap is by default set to

flex-wrap: nowrap;

This simple solution works like a charm. And by now also in all relevant browsers.

answered Jul 05 '18 at 13:34

Juuro

1,487
5
16
27

score 2 · Answer 5 · answered May 24 '11 at 18:58

2

If you float everything left including the containing divs, it will work.

answered May 24 '11 at 18:58

AlbertVo

772
4
9

score -10 · Answer 6 · answered May 04 '12 at 11:39

-10

just set the width of the parent to 120% and done =)

answered May 04 '12 at 11:39

matmancini

686
1
5
5

3

That will allow a few more elements, what about more stuff coming in? – Om Shankar Jul 05 '13 at 09:17

Expand container div with content width

6 Answers6

Linked