Center Divs horizontally - html

Question

I'm trying to figure out how to center more than one DIV horizontally.
My Code looks like this:
HTML:
<div id="circle">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
CSS:
#circle {
text-align: center;
}
#circle1 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
#circle2 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
They do center horizontally but there's a break between the circles and I have no clue how to get them in a straight horizontal line.
I googled already, but didn't found anything that works..

Answer 1

You can add display:inline-block; to both #circle1 and #circle2
Also, thee is no need for margin: 0 auto; on both div's since you have text-align:center; in your wrapper.
JSFiddle Demo

Answer 2

You shouldn't use display: inline-block to center elements like divs due to how whitespace in the HTML document will affect the styling.
This jsFiddle outlines the differences. imbondbaby's inline-block divs have a small amount of whitespace between them that can only be removed by eliminating whitespace in your markup. This can be diffcult to diagnose and debug, and has bitten me before.
Instead, center the container of the divs using margin: 0 auto. Then float: left the divs inside their parent to place them next to each other, and apply a clearfix to the container.
Style:
#wrapper {
margin: 0 auto;
}
.clearfix {
display: table;
clear: both;
}
.circle {
float: left;
}
HTML
<div id="wrapper" class="clearfix">
<div class="circle"></div>
<div class="circle"></div>
</div>

Answer 3

If I've understood your question correctly, you want the two circles to be on the same line, centered within the wrapper circle div.
Basically, you could float one circle to the left, and the other to the right to get them on the same line. Then to adjust how close they are together within the wrapper div, you could adjust the width property of the wrapper div with a percentage (which in this case is relative to the div's parent, the body).
Here's an example of a potential solution: http://jsfiddle.net/UFN5S/
By the way, there are other similar questions to this already on SO. I know you've said you googled, but usually with questions like this one there has already been asked and answered on SO.
i.e.:
How to center two divs floating next to one another
or
Aligning two divs side by side center to page using percentage width
Hope that helps!