Center div parent when children have dynamic width

Question

I have several div’s with the following css:

float:left;
width: 25%;
min-width: 300px;
max-width: 400px;

That is, as I insert a div, it fills the available space from the left side of the parent div and when there is no space breaks down.

Turns out when it breaks down, it leaves space on the right side, so I wanted to center all div’s so that the space on the left side is equal to the right side.

I know how to center a div, that’s not the case, because Divs have a dynamic width.
I tried to make a text-align center in the parent div and children an inline-block diplay, but the latest Ivs were in the center of the parent div and I want them to be on the left side of the parent div that is centered.

In short, it is centering a parent div when the contents of this div are other Ivs with dynamic width, and inside the father div no spaces left on the sides.

Answer 1

Using flexbox:

HTML:

<div class = "container">
    <div class = "box a">1</div>
    <div class = "box b">2</div>
    <div class = "box c">3</div>
    <div class = "box a">4</div>
    <div class = "box b">5</div>
    <div class = "box c">6</div>
    <div class = "box a">7</div>
    <div class = "box b">8</div>
    <div class = "box c">9</div>
</div>

CSS:

.container {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        width:80%;
        background-color: #ccc;
        margin: 0 auto;
    }

.box {
        min-width:100px;
        max-width:150px;
        min-height:30px;
        flex-grow: 1;
    }

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

The size of the boxes can be changed using the min-width and the max-width. Only in extreme cases would the right margin appear, but this a @media would solve (to eliminate the max-width of very narrow screens).

Demo: http://jsfiddle.net/Bacco/FGYrH/

Using Javascript:

This solution has been simplified to a fixed width DIV in the boxes, but with a few adjustments (plus a little math :P ) can be adapted to flexible width:

We added a div external reference, and a span to prevent floats from escaping the container:

HTML:

<div id="reference">
   <div id="container">
      <div class="box a">1</div>
      <div class="box b">2</div>
      <div class="box c">3</div>
      <div class="box a">4</div>
      <div class="box b">5</div>
      <div class="box c">6</div>
      <div class="box a">7</div>
      <div class="box b">8</div>
      <div class="box c">9</div>
      <span class="clr"></span>
   </div>
</div>

CSS:

#reference, #container, .box {
   padding: 0;
   margin: 0;
}

#reference {
   position:relative;
   background-color: #ffc;
}
#container {
   position: relative;
   background-color: #ccc;
}

.box {
   float: left;
   width:100px;
   min-height:30px;
}

.clr {
   display:block;
   clear:both;
}

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

Until then, there is a traditional layout, with margin left on the right side. Some of the desired aesthetic is lost if for some reason one is browsing with JS disabled, but usability remains.

To give the final finish, centering the container, solved with a small JS function, which should be called in the onload, in the onresize (or after any layout changes made with JS or some framework):

JS:

window.onresize = function() {
   b2AdjustPadding();
}

function b2AdjustPadding() {
   var boxSize = 100; // Ponha o mesmo width que estiver no CSS
   var reference = document.getElementById('reference');
   var remaining = reference.offsetWidth % boxSize;
   var padLeft = Math.round(  remaining / 2 );
   var padRight = remaining - padLeft;

   reference.style.paddingLeft = padLeft+"px";
   reference.style.paddingRight= padRight+"px";
}

What we did here was basically the following: By changing the page width, we calculate how much margin is left, using the module ( % ). Then we divide this in the middle, rounding, to add a left padding in our element reference. What’s left, we put in the right padding, so there’s no margin left.

Note that margins are calculated separately, for rounding problems not leaving a pixel left on the right side, which would happen on certain widths.

Remember to put the same width in the CSS and variable boxSize. If you prefer, you can get the size dynamically, but I find a bit of an exaggeration (unless you’re going to make a lib for that reason).

Demo: http://jsfiddle.net/Bacco/232Gk/