Container div changes width when a second row of floating children is added

Question

In the following jsFiddle, the width of the container div is 100% when there is two rows, and less than 100% when there is only one (i.e. it wraps the children).

http://jsfiddle.net/fpooemgj/

I'd like for the container div photo_stream_wrapper to be as tight as possible around the children. How can I achieve that?

One row:

Two rows:

I want this instead of the last image. I want to eliminate the extra grey space:

Answer 1

Interesting question. You would certainly expect the floated container div to be no more than the width of the children (as it is with only one row).

If you know the number of items in each row, wrapping the items with a row div seems to work:

<div class="photo_stream_wrapper">
    <div>   <!-- "row" div -->
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
    </div>
    <div>   <!-- "row" div -->
        <div class="photo"></div>
    </div>
</div>

Answer 2

I had a very similar problem, which can be referenced in my post:

How can I make a container div the same width as it's floating children and center it when there are multiple rows of floating children?

In my case I have something along the lines of this:

<div class="centered">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

It looks like jQuery is the answer. In order to "dynamically" set the width of the containing div, we need to calculate the width on a screen resize event via jQuery. We can use the width of the window and the width of the children to calculate the width of the inner container.

Here is the fiddle:

var resizeContainerDiv = function() {
  var screenWidth = $(window).width();
  var childWidth = $(".child").outerWidth();
  var innerContainerWidth = Math.floor(screenWidth / childWidth) * childWidth;

  $('.container').css('width', innerContainerWidth);
}

$(window).on("load", resizeContainerDiv);

$(window).on("resize", resizeContainerDiv).resize();


.centered {
  text-align: center;
}

.container {
  background: red;
  padding: 10px;
  display: inline-block;
}

.child {
  width: 100px;
  height: 100px;
  float: left;
}

.child:nth-child(even) {
  background: green;
}

.child:nth-child(odd) {
  background: blue;
}


<div class="centered">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

https://jsfiddle.net/02arvnLx/1/