CODEWITHSUNDEEP
htmlcss
Ahmad Ameri
Ahmad Ameri

Reputation: 400

Arrange DIVs in another DIV

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

Upvotes: 0

Views: 118

Answers (4)

TimSPQR
TimSPQR

Reputation: 2984

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;
}

Upvotes: 1

Nagendra Rao
Nagendra Rao

Reputation: 7152

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

Upvotes: 1

tgpatel
tgpatel

Reputation: 144

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

Upvotes: 1

mituw16
mituw16

Reputation: 5250

Try adding the following to the .info class. 

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

Also remove position: absolute; from .info

http://jsfiddle.net/G3N24/

Upvotes: 2

Related Questions