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?

Question

I have a container div with multiple floating child divs. Each child has the same width, but the size of the row varies based on screen width. I want the container to only be the width of its children and also be centered, all dynamically depending on screen size. This post explains a similar problem:

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

Here is a fiddle that also explains the issue:

.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>

http://jsfiddle.net/LxLjv3tm/1/

Here is another stackoverflow post that solves the issue for one row:

Having the floating children elements determine parent width

(the issue is there are enough floating children to make multiple rows)

You'd have to use JS..because it's not possible **dynamically** with CSS. — Paulie_D, Aug 23 '16 at 15:06
Have you tried using css3 media queries? https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — mmmoustache, Aug 23 '16 at 15:07
http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Aug 23 '16 at 15:07
if its okay to look at other options apart from `float` I guess you can do it purely in CSS — kukkuz, Aug 23 '16 at 15:10
You could do something like this with js but its not going to "resize back" https://jsfiddle.net/Lg0wyt9u/1142/ — Nenad Vracar, Aug 23 '16 at 15:14
http://jsfiddle.net/SbPRg/ does exactly what I want, but it is only for one row. I guess when the children break into new rows, there is no way with just css to solve the problem. JS may be my only option. I will try this. Thanks! — Justin B, Aug 23 '16 at 15:16

Justin B · Accepted Answer · 2016-08-23T16:28:39.360

It looks like jQuery is the answer. In order to "dynamically" set the width of the container 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/

Note that if you add true to .outerWidth(), the width includes the margin (e.g. .outerWidth(true)). By default, .outerWidth() only handles border and padding. — Justin B, Aug 31 '16 at 15:59

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?

1 Answers1

Linked