How To Align Div's Horizontally In Css

I have three child divs inside a container and I want to align these div's horizontally. I tried using the css float property but the circles are becoming oval. Markup Code: <

Solution 1:

Circles are becoming oval because of padding property you have applied. just remove padding: 5px 10px; and add float:left; in the circle class.

.circle {
    position: relative;
    background-color: #3cb371;
    border-radius: 50%;
    float: left;
    width: 20%;
}

Solution 2:

Please use display: inline-block;

http://jsfiddle.net/K6PKK/

Solution 3:

try this:

div.clearfix {
    display : table;
}

div.circle {
    display : table-cell;
}