Multiple Divs On One Line With Even Spacing - html

Question

I have a Slider with a few images. Inside this slider, i have a div called "sb-bolas", and inside this div, i created new div's where i have a circle, and inside this circle i want to insert some text.
But i need to create more then 1 circle and i want to every circle have the same space between them.
How can i do this?
HTML
<div class="sb-bolas">
<div class="bolas-grad">something</div>
<div class="bolas-grad">something</div>
<div class="bolas-grad">something</div>
</div>
CSS
.sb-bolas {
padding: 10px;
bottom: 50px;
left: 100px;
right: 100px;
z-index: 1000;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #fff;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
}
.bolas-grad {
width: 100px;
height: 100px;
border-radius: 50px;
opacity: 0.7;
filter: alpha(opacity=40);
background: linear-gradient(to bottom, #007EFF, #09f);
font-size: 12px;
color: #fff;
line-height: 100px;
text-align: center;
}
*UPDATE**
Image

Answer 1

Use float:left; and margin
Keep in mind, using float will remove any absolute positioning you may have established with its parent element. To further help clarify what exactly you need to do, we don't have enough context with the rest of your HTML. Please provide more detailed code if you want a more detailed answer.
View Here: http://jsfiddle.net/SinisterSystems/qwA32/2/
HTML:
<div class="slideshow">
<div class="slide" style="background:#C00;">
</div>
<div class="slide" style="background:#0C0;">
</div>
<div class="slide" style="background:#00C;">
</div>
</div>
CSS:
.slideshow {
position:absolute;
top:0;
left:0;
}
div.slide {
float:left; // <------- Here
margin-right:50px; // <------- Here
width: 100px;
height: 100px;
border-radius:50px;
opacity:0.7;
filter:alpha(opacity=40);
background:linear-gradient(to bottom, #007EFF, #09f);
font-size:12px;
color:#fff;
line-height:100px;
text-align:center;
}
View Here: http://jsfiddle.net/SinisterSystems/qwA32/2/

Answer 2

Add property
display:inline-block;
to the class .bolas-grad to have the circles in the same row.
To have even spaces add margin to the class .bolas-grad