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.

Answer 1

Something like this should work:

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