Arrange DIVs in another DIV - html

Question

This is my HTML code:
<div id="upmenu">
<div class="info" id="info-uberuns"><div>ubernus</div></div>
<div class="info" id="info-consultant"><div>consultant</div></div>
</div>
And this is CSS class:
.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%;
}
I want to arrange DIVs with info class in the DIV with upmenu class and show them side by side.
But the problem is that they are shown on top of each other instead of being shown side by side.
Please help me to solve this issue.
Regads

Answer 1

Try adding the following to the .info class.
display: inline-block;
vertical-align: top;
Also remove position: absolute; from .info
http://jsfiddle.net/G3N24/

Answer 2

You can add float:left to the .info class.

Answer 3

Either you can make the div's display property as inline-block like mituw16 showed,
OR
You can make the element itself a span, and no need to change any style.
<div id="upmenu">
<span class="info" id="info-uberuns">ubernus</span>
<span class="info" id="info-consultant">consultant</span>
</div>
JSFIDDLE

Answer 4

A different approach...not any better than other suggestions.
FIDDLE
You can play with the CSS and make it look anyway you want.
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;
}