Left align children in a centered dynamic width parent

Question

I kinda can\'t wrap my head around it and it is also hard to find the proper solution on the web/here as it is hard to formulate.

Basically what I want is something

Answer 1

If you want to use media query to handle this then it will probably be something like

@media only screen and (max-width: 1280) {
   .innerBox {
        width: 20%;
    }
}

@media only screen and (max-width: 1024) {
   .innerBox {
        width: 10%;
    }
}

@media only screen and (max-width: 768) {
   .innerBox {
        width: 5%;
    }
}

These width I have are just arbitrary numbers. The width in % are also arbitrary, but if you want the boxes to fit nicely into 100% then they need to be able to divide evenly into 100. I did not include any padding or margin, I am sure you can figure that part out. Please keep in mind that media query is not supported in legacy browsers like IE8 and under. But you can download js plugins to make them work. Google is your friend

Answer 2

I don't know if this is the correct way to close this question, but I would want to thank everybody responding to my question. So I guess it is not possible to create this behavior only with CSS. jQuery or Media Queries are needed to get the proper behavior.

Here is how I finally resolved the issue (using jQuery actually): http://jsfiddle.net/Ewtx2/

HTML

<div id='container'>
<div id='outline'>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
</div>
</div>

CSS

#container {
    width:100%;
    text-align:center;
    border: 1px red dashed;
}
#outline {
    text-align: left;
    font-size:0;
    display: inline-block;
    padding-left:5px;
    padding-bottom:5px;
    /* for ie6/7: */
    *display: inline;
    border: 1px black dashed;
    zoom:1;
}
.innerbox {
    display:inline-block;
    height:50px;
    margin-top:5px;
    margin-right:5px;
    width:50px;
    background:red;
}

jQuery

var boxAmount = 0;
var newWidth = 0;
setNewWidth();

$(window).resize(function() {
    setNewWidth();
});

function setNewWidth() {
    // get container width and check how many boxes fit into it (account margin/padding)
    boxAmount = ($('#container').width() - 5) / ($('.innerbox').width() + 5);
    boxAmount = Math.floor(boxAmount);
    // multiply the box amount with the box width to get the new width to hold the box amount + padding
    if(boxAmount <= $('.innerbox').length) { 
        newWidth = boxAmount * $('.innerbox').width() + boxAmount * 5; 
    }
    // set the new calculated width
    $('#outline').width(newWidth);    
}

I wrote a script that takes the container width, divides it by the size of a single box, floors it, which gives us the amount of boxes fitting into the container. Then it multiplies this box amount with the box width, which then gives us the new size for the outline. The new size is set to the outline and thus the outline with all the boxes always stays centered and no strange white space to the right appears.

Answer 3

I did it with pure CSS by adding a couple of container divs around the square elements and playing around with the displays and text-alignment. See a demo here

HTML:

<div id='container'>
    <div id='outline'>
        <div class='innerbox'></div>
        <div class='innerbox'></div>
        <div class='innerbox'></div>
        <!-- As many as you want -->             
    </div>
</div>

CSS:

#container {
    width:100%;
    text-align:center;
}
#outline {
    text-align: left;
    display: inline-block;
    /* for ie6/7: */
    *display: inline;
    padding:5px 5px 0px 5px;;
    border: 1px black dashed;
    zoom:1;
}
.innerbox {
    display:inline-block;    
    margin:0 auto 0 auto;
    height:50px;
    width:50px;
    background:red;
}

Note based on comments below

There is a space between the right most box and the right of its container when the boxes take up more than one line. Without some sort of javascript this small amount of space is impossible to remove completely

Edit to add fully functionality using javascript

Here is my attempt at achieving full functionality using javascript and jQuery: demo here. It's still glitching when shrinking the window size due to the added <br/>s, but I'll look for a fix and the code might be useful to some users in addition to your answer. I think my solution is slightly more generic than yours though. Glad I could help you get the right idea!

Pure javascript version added later

Here is my most recent version of this objective. It is in pure javascript, removes the need for a container, and removes the hard-coded padding values