How do I center align a div that contains floated elements?

Question

I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?

HTML:

<div class="parent_container">
    <div class="inner_holder">
        <div class="column column1">
            <div class="inner_clip"></div>
        </div>
        <div class="column column2">
            <div class="inner_clip"></div>
        </div>
        <div class="column column3">
            <div class="inner_clip"></div>
        </div>
    </div>
</div>

CSS:

.parent_container {
      height: auto;
      margin: 15px auto;
      min-height: 500px;
      width: 960px;
}
.column {
     float: left;
     margin-right: 50px;
}
.inner_clip {
    background-color: #333333;
    height: 250px;
    margin-bottom: 20px;
    width: 250px;
}

Answer 1

As you can see here the "div that contains floated elements" is actually in the center (red).

I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.

Changes to your CSS:

.parent_container {
    text-align:center;     // added
}
.column {
    display: inline-block; // added
    margin: 0 25px;        // added
    float: left;           // removed
    margin-right: 50px;    // removed
}

Result as Fiddle