How to make the parent element fit its floated children as long as they aren't wider than the window?

Question

I am trying to center a list of floating elements, but since it's a masonry I can't make them inline. A container would be needed, that much is obvious, but I couldn't find anywhere how do make it do this:

Ignore the margins here, they don't matter, it's just so each separate child element can be seen. And yes, the parent isn't centered, but it could be. The important part is that it dynamically fits the child elements and its width isn't 100% all the time.

Already tried floating the parent, in that case the child elements only make a single column.

Answer 1

Why not just set the parent's width the product of that of the maximum numbers of children with each child's width (if the child's width is constant)?

 var x = $(child).outerWidth();
 $(window).resize(function() {
      $(parent).width(Math.floor($(window).width() / x)*x);
 });