49

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.

3
  • Please provide some code. In a fiddle is even better.
    – Ortiga
    May 24, 2011 at 18:55
  • 1
    Here it is: jsfiddle.net/8XGqs
    – Andre
    May 24, 2011 at 19:51
  • jsfiddle.net/8XGqs/1 illustrates the equivalent of the ascii art above better, I think. Just added width:100% to #container.
    – Andre
    May 24, 2011 at 19:59

6 Answers 6

35

Even easier:

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

Something like this should work:

#container, #child_container, .child { 
    position: relative; 
    float: left;
}
12
  • 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, 2011 at 19:13
  • 1
    This is good... although you may not need the position:relative; May 24, 2011 at 19:15
  • 1
    @wajiw: Which browsers? I assume you're talking about some really old browser.
    – thirtydot
    May 24, 2011 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, 2011 at 19:30
  • 1
    Can you have a look at jsfiddle.net/8XGqs/1 ? It doesn't seem to work on that example, even though everything has "float:left;".
    – Andre
    May 25, 2011 at 16:54
13

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  
|                         |
+------------------------+
1
  • but the width of container doesn't grow, do it?
    – alumi
    Jul 27, 2018 at 4:12
2

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

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.

-10

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

1
  • 3
    That will allow a few more elements, what about more stuff coming in?
    – Om Shankar
    Jul 5, 2013 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.