Center floated child DIVs in a parent DIV that has fluid width - html

Question

I have the following HTML:
<div id="parent">
<div class="child">Box1</div>
<div class="child">Box2</div>
<div class="child">Box3</div>
<div class="child">Box4</div>
<div class="child">Box5</div>
<div class="child">Box6</div>
<div class="child">Box7</div>
<div class="child">Box8</div>
<div class="child">Box9</div>
<div class="child">Box10</div>
</div>
And the following CSS:
#parent {
display: inline-block;
max-width: 1000px;
height: 500px;
border: 1px solid #000000;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #000000;
margin: 10px;
float: left;
}
I want to float left the child DIVs and at the same time center them in the parent DIV that does't have a fixed width.
The reason I don't want to use display: inline-block for the child DIVs is that if a row has only 1 or 2 boxes , they will be centred and i want them to be aligned to the left with the boxes on the previous rows.
The second reason is that more data will be loaded using ajax. So, if the last row has only 1 or 2 boxes and still can accommodate more boxes, they will be inserted into a new line instead of being appended to the last row. I'm not sure of this point but I think that what would happen when using display inline-block. Float instead doesn't have this behaviour.
Forgot to mention that the parent should be display: inline-block because another box will be aligned next to it.
I created a fiddle for you to play with:
http://jsfiddle.net/6a2eqpmu/

Answer 1

Unfortunately you are unable to do this using pure css. If you are willing to use a bit of javascript and jQuery you can easily achieve what you want:
var parent = $('#parent'),
container = $('#container'),
children = container.children('.child'),
width = children.eq(0).outerWidth() + parseInt(children.eq(0).css('margin-left')) + parseInt(children.eq(0).css('margin-right')),
maxWidth = children.length * width;
function resizeContainer() {
var newWidth = Math.floor(parent.width() / width) * width;
if (newWidth <= maxWidth && newWidth > 0) {
container.width(newWidth);
}
}
$(window).resize(resizeContainer);
resizeContainer();
Example

Answer 2

Simply add margin: 0 auto; to #parent. This will center the parent div when the document width is over 1000px wide.

Answer 3

If your parent element doesn't have a fixed width you can't center his child elements with only CSS. I think you have to write some script that calculate the parent width, every row width and set to them the properly margin-right and margin-left.

Answer 4

text-align works on inline elements. If I understand your problem, you should remove the float and put the boxes in display:inline-block.
Something like this : http://jsfiddle.net/6a2eqpmu/7/
#parent {
max-width: 1500px;
height: 500px;
border: 1px solid #000000;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #000000;
margin: 10px;
display:inline-block;
}
I added html comments to avoid the white-space problem, and put a max-width of 1500px in order to see the boxes centered.

Answer 5

You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.
http://jsfiddle.net/aakt65x4/
If you don't fill up the first row, the entire thing will appear left-aligned. But I think that's what you want.
HTML:
<!--
Centers a group of boxes that wrap to the width of its container.
Also left-aligns them inside the container.
Issue: Does not center group if there aren't enough boxes to fill
the first row.
-->
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<!--
How many placeholders do you need?
At least the number of blocks minus two.
-->
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
CSS:
body {
text-align: center; /* center a max-width container */
font-size: 0; /* remove spaces between blocks */
}
.container { /* you don't need this */
background-color: #eee; /* so you can see what's happening */
max-width: 960px; /* to demonstrate the centering of a max-width container */
display: inline-block; /* center the max-width container */
text-align: center; /* center the group of blocks */
}
.block {
display: inline-block; /* left-align within the group */
background-color: red; /* so you can see what's happening */
height: 100px;
width: 100px;
margin: 10px;
}
.placeholder {
display: inline-block; /* add to the line of blocks */
width: 120px; /* width + margin of a block */
}