Устройте DIVs в другой DIV

Question

Это мой HTML код:

<div id="upmenu"> 
    <div class="info" id="info-uberuns"><div>ubernus</div></div> 
    <div class="info" id="info-consultant"><div>consultant</div></div> 
</div> 

И это CSS класс:

.info{ 
    position: absolute; 
    width: 130px; 
    height: 47px; 
    z-index: 0; 
    background: rgba(255,255,255,0.8); 
    top: 13px; 
    color: #3b3b3b; 
    padding-top: 5px; 
    line-height: 22px; 
    font-size: 15px; 
    cursor: pointer; 
}  
.info div{ 
    margin-left: 20px; 
}  
#upmenu{ 
    margin:auto; 
    width:100%; 
} 

Я хочу устроить DIVs с инфо класса в DIV с upmenu класса и шоу они бок о бок. Но проблема в том, что они показаны друг на друга, а не показаны бок о бок. Пожалуйста, помогите мне решить эту проблему.

Regads

Answer 1

Попробуйте добавить следующее в .info классе.

display: inline-block; 
vertical-align: top; 

Также удалите position: absolute; из .info

http://jsfiddle.net/G3N24/

Answer 2

Вы можете добавить поплавок: слева класса .info.

Answer 3

Либо вы можете сделать дисплей имущество, div «s, как inline-block, как показал mituw16,

ИЛИ

Вы можете сделать сам элемент а span, и нет необходимости вносить изменения в любой стиль.

<div id="upmenu"> 
    <span class="info" id="info-uberuns">ubernus</span> 
    <span class="info" id="info-consultant">consultant</span> 
</div> 

JSFIDDLE

Answer 4

Другой подход ... не лучше, чем другие предложения.

FIDDLE

Вы можете играть с помощью CSS и сделать его в любом случае вы хотите.

HTML

<div id="upmenu"> 
    <div class="info" style="float: left;" id="info-uberuns"> 
    ubernus 
    </div> 
    <div class="info" style="float: right;" id="info-consultant"> 
    consultant 
    </div> 
</div> 

CSS

#upmenu{ 
    border: 0px solid black; 
    margin:20px auto; 
    width:40%; 
} 
.info{ 
    background-color: blue; 
    color: white; 
    padding: 10px; 
    line-height: 22px; 
    font-size: 15px; 
    cursor: pointer; 
    border-radius: 5px; 
}