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?
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)
Answers:
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>