Dynamically center blocks on page resize?

Question

I want these blocks to always be centered in the page no matter what the screen dimension is.

http://seriouslyineedthis.com/

The problem is that it always floats to the left.

*I was using the Masonry plugin, but had issues with overlapping (so I don't want that to be an answer).

In the code I'm simply doing this:

<div id="content_holder_outside">
<div id="content_holder">
     <!-- Blocks and content go here -->
</div>
</div>

#content_holder_outside {
    width:100%;
    text-align:center;
    float:left;
    }

#content_holder {
    min-height:600px;
    }

It's super simple, but that's not working. Everything's still floated to the left. Any ideas?

Answer 1

If you add display: inline-block; to your #each_box_holder and remove float:left from it, it will stay centered.

Note: change it from id to class. An id should be used only when it is unique. In your case it is not, so using a class is better and will save you a lot of trouble in the feature.