Centralizing items on div with percentage width

Question

I have a kind of "mosaic" on my site and he is inside of a div whose width is measured by percentage.

The problem

How can I centralize content (to be more specific, mosaic) inside a div whose width is measured by percentage?

The code

HTML:

<div class="main-container">
    <div class="container">
        <div class="right">
            Some menu.
        </div>
        <div class="left">
            <ul class="list">
                <li>Showcase #1</li>
                <li>Showcase #2</li>
                <li>Showcase #3</li>
                <li>Showcase #4</li>
                <li>Showcase #5</li>
                <li>Showcase #6</li>
            </ul>
        </div>
    </div>
</div>

CSS:

.main-container {
    background-color: #c19fe2;
    width: 95%;
    margin: 0 auto;
}

.container {
    position: relative;
}

.left {
    background-color: #ebd6ff;
    width: 300px;
    height: 200px;
}

.left li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
}

.right {
    float: right;
    width: 270px;
    height: auto;
    padding: 15px;
    background-color: #8863ac;
}

jQuery/JavaScript:

/** Packery (jQuery Grid like Masonry/Prototype) **/
$(function() {
    var $container = $(".left");
    // initialize
    $container.packery({
        itemSelector: "li",
        gutter: 5
    });
});


/** Centralize the main container **/
function calculateMainContainerWidth() {
    $realWidth = $(".main-container").width() - $(".right").outerWidth(),
    $containerContent = $(".left");

    $containerContent.css("width", $realWidth);
}

$(window).on("resize", function() {
    calculateMainContainerWidth();
});

calculateMainContainerWidth();

To debug, FiddleJS

Just click here to go to the Fiddle.

Technical details

The calculateMainContainerWidth function works fine — it is calculating the width of my container, but I can't use margin: 0 auto; to centralize perfectly. Of course there is a logical conflict behind this that is preventing me to centralize, but I would like to know what.

References

The mosaic is made by Packery, a Metafizzy's plug-in.

Progression

Take a look at my own answer — the solution will be there.

Answer 1

I found a simpler solution for my headache.

I was using the Packery's plugin, by Metafizzy and after some research, I discovered that he doesn't have a centralized layout natively. Then, without hesitation, I switched to Isotope, by the same creator, Metafizzy.

Unfortunatelly, at first I didn't find a solution. At first, seemed that the Isotope didn't have a centralization resource until I found this extension, created by Beau Smith, which centralizes and works with gutters. After all this, I got my mosaic centered. =)

I would like to apologize to those people who sought a solution for me, but either way it will be an alternative for those who have the same problem in the future. Thank you!

Answer 2

Partial Solution

I found a partial fix to the centering problem by adjusting the CSS as follows:

.left {
    background-color: #ebd6ff;
}
ul.list {
    margin: 0;
    padding: 0;
    max-width: 330px;
    margin: 0 auto;
}
ul.list li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
    margin: 0; 
    padding: 0;
}

The trick is to give a max-width to ul.list based on the maximum number of columns you expect (5 x 55px in this case).

With a maximum width, and using margin: 0 auto, the list will center in the .left container.

Also, it helps to zero out margin and padding since packery uses absolute positioning to place the elements.

Finally, apply the packery method to .list instead of .left.

Demo Fiddle: http://jsfiddle.net/audetwebdesign/Nsm2Z/

Limitation: Once the widow size shrinks so that the <li> elements start forming two or more rows, there will be some extra white space on the right. At this point, the layout is determined by the packery bin-layout algorithm and there is not too much that the CSS can do since the <li> elements are positioned absolutely so out of the flow of the regular content, regular centering tricks won't work.

Answer 3

I'm not sure why you need all of the JavaScript and jQuery for horizontally centering a <div> in a container <div>. I usually just go with a div that has margins like this:

#centeredContent
{
    margin: 0 auto;
}