irritating div with content - html

Question

Here is my http://jsfiddle.net/8wSzk/2/
<div class="row1">
<div>
<div class="circle-menu">
</div>
<p> some option </p>
</div>
<div>
<div class="circle-menu">
</div>
<p> some option <br /> and <br /> another option </p>
</div>
</div>
<div class="row2">
<div>
<div class="circle-menu">
</div>
<p> circle3 </p>
</div>
<div>
<div class="circle-menu">
</div>
<p> circle4 </p>
</div>
</div>
I want my both circle to be in a straight line with its content just below the circle. can somebody help me fixing my css. I am quite new to it.

Answer 1

I think this is what you want. If you want to have two elements side to side, you must use the float attribute. In this case, it would be float:left;.
EDIT
NEW DEMO

Answer 2

Do it like this
<div class="row1">
<div>
<div class="circle-menu">
</div>
</div>
<div>
<div class="circle-menu">
</div>
</div>
</div>
<div class="row1">
<div>
<p> some option </p>
</div>
<div>
<p> some option <br /> and another option </p>
</div>
</div>

Answer 3

New fiddle Code:Works Perfect
Here you go mate, redone it for you. Have a look through it and see what I've done
<div class="row1">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Some option
</div>
<div class="option">Some more options
</div>
</div>
<div class="row2">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Even more options
</div>
<div class="option">Got the idea?
</div>
</div>
.row1 {
height:90px;
}
.row2 {
height:90px;
}
.circle-menu {
width: 80px;
height: 80px;
display: inline-block;
float:left;
background-color: #cacece;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
cursor: pointer;
margin: 5px;
}
.option {
display:inline-block;
width:80px;
margin: 5px;
text-align:center;
vertical-align:top;
}
.options-row {
}