Center 3 floating divs inside a wrapper div

Question

I have 3 divs inline a wrapper div. i want all three divs to be in the center of the 100% width wrapper div.

i tried margin: 0 auto but it didn't work because of the 100% width.

here is the code:

#first, #next, #last {
    float: left;
    width: 300px;
    height: 320px;
    border: 1px solid black;
}



#content #kompetenzen {
    text-align: center;
}

and the html

<div id="kompetenzen">
    <div id="first">

        <img src="images/kompetenzen/graphic.png" alt="Werbegrafik" />
        <ul>
            <h3>HEADER</h3>
            <br>
            <li>LEISTUNG1</li>
            <li>LEISTUNG2</li>

        </ul>
    </div>

    <div id="next">

        <img src="images/kompetenzen/design.png" alt="Werbegrafik" />
        <ul>
            <h3>HEADER</h3>
            <br>
            <li>LEISTUNG1</li>
            <li>LEISTUNG2</li>
            <li>LEISTUNG3</li>
            <li>LEISTUNG4</li>


        </ul>
    </div>

    <div id="last">
        <img src="images/kompetenzen/dev.png" alt="Werbegrafik" />
        <ul>
            <h3>HEADER</h3>
            <br>
            <li>LEISTUNG1</li>
            <li>LEISTUNG2</li>

        </ul>
    </div>
    <div style="clear:both"></div>
</div>

Answer 1

Remove the float:left from the #first etc., and replace it with a display:inline-block;

#first, #next, #last {
    width: 300px;
    display:inline-block;
    height: 320px;
    border: 1px solid black;

}



#kompetenzen {
    text-align: center;
}

http://jsfiddle.net/70e2uqc1/1/

Answer 2

#content #kompetenzen could use display:flex; align-items:center; justify-content: center. This would make 3 divs vertically and horizontally centered. UPDATE Be aware of browser compatibility and use vendor prefixes properly.