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


Tags: html,css,css-float

Problem :

I need inner_holder to have width of 960px and I need it ot be centered. I tried using widht: 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;
}


Solution :

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


    CSS Howto..

    How (and why) to use display: table-cell (CSS)

    How to hide specific text from content wihtout calling any CSS?

    How to debug CSS/Javascript hover issues

    how to make my horizontal css dock navigation to vertical

    How can I test websites for Mobile Devices

    How to add css to jquery backstretch?

    More CSS woes: how to stack divs inside another div, and have them all behave?

    How to hide a div class in Wordpress? CSS

    How to set different table widths using CSS or jQuery?

    How to Create CSS Selector Element including index

    How do I select an element in the dom with an attribute of ct:value?

    How to add a specific class to select2 drop element?

    How to add CSS for dynamic MenuItems in MenuList and How to get the value of the MenuItem in XUL

    How to use externel CSS and (static) images in Go, Google App Engine

    CSS: how do I position my slideshow counter up into the slideshow

    How to make a div 100% width minus a certain amount?

    how to make target link work giving different css properities

    How do I change the opacity of an image when I hover of my text?

    How to add a scrollbar to an HTML5 table?

    How do I differentiate between two different images in the same class in my CSS file

    How to remove the particular CSS style (set through CSS file) from an HTML list

    CSS: Background in front of image - how to prevent it?

    CSS how to style a parent item when a textarea is in focus?

    How to make each element to be fully independend with CSS?

    How to transform Menu icon to Arrow icon? [closed]

    CSS background with image and gradient, how to write in multiple lines ?

    How can CSS translate elements away from one point?

    How do I add line-height to a