раздражающее ДИВ с содержанием

Question

Вот мой 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> 

Я хочу, чтобы мой как круг, чтобы быть в прямой линии с его содержанием чуть ниже круга. может кто-нибудь помочь мне исправить мой css. Я совершенно новичок в этом.

Answer 1

Я думаю, что это то, что вы хотите. Если вы хотите иметь два элемента друг к другу, вы должны использовать атрибут float. В этом случае это будет float:left;.

EDIT NEW DEMO

Answer 2

Делают это, как этот

<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

Здесь вы идете мат, переделано для Вас. Посмотрите через него и посмотреть, что я сделал

<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 { 

}