How to center the alignment of a div containing floating elements?

Question

I need the inner_holder to have a width of 960px, and I need it to be centered. I tried using width: 960px and margin: 0px auto, but it does not work. How can I center a div 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 containing floating elements" is actually in the center (red).

I assume that you want to center the floating elements themselves, not their parent. I'm afraid you cannot do this (as far as I know). But if you are not dependent on your elements to actually float ing, you just want to display your .colum as inline-block with the text-align:center set by the parent.

CSS changes:

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

Result as a script

Answer 2

I hit my head, trying to figure it out forever. The answer above is about assigning "display: inline-block" to elements in a div, and then assigning "text-align: center" to the parent div works BUT BUT BUT BUT ... I had a clearfix class on my parent div, which seems to be , did all this. As soon as I removed this clearfix class, everything was well focused (after much useless disappointments, of course;). Hope this helps someone.