Positioning 2 DIVs top of each other

Question

I'm working with PHP, HTML and CSS to make a website. I'm having this issue: There are 2 divs: profile_Nick and profile_Ranks. However profile_Ranks cannot just go right bellow profile_Nick. How can I set their position bellow the WalkerJetBat text? Thanks.

.profile_Nick
{
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 34px;
    margin-left: 12px;
    padding-left:11px;
    padding-top:2px;
    padding-right:11px;
    padding-bottom:2px;
    float: left;
    left:12px;
    max-width: 405px;
    background-color: rgba(0,180,255,0.60);
    border-radius: 2px;
}

.profile_Ranks
{
    position:relative;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 12px;
    margin-left: 12px;
    padding-left:11px;
    padding-top:2px;
    padding-right:11px;
    padding-bottom:2px;
    float:left;
    background-color: rgba(0,180,255,0.60);
    border-radius: 2px;
    top:50px;
}


<div class="profile_infoholder">
  <div class="profile_Nick">
    <? echo $steamprofile['personaname']; ?>
  </div>
  <div class="profile_Ranks">
    Developer
  </div>
  <div class="profile_Ranks">
    +Premium
  </div>
</div>

That's a complete overkill... you are using `position` and `float` together!! You don't need `float` if you use `position`. — Fr0zenFyr, Jun 23 '14 at 12:01
No point using `float` and `position` together, they do pretty much same thing(not exactly same). Check [this](http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm) and [this](http://stackoverflow.com/q/11333624/1369473). — Fr0zenFyr, Jun 25 '14 at 05:23

score 0 · Answer 1 · answered Jun 23 '14 at 11:58

0

Found btw.

.profile_infoholder .profile_Nick
{
    position:absolute;
}

Adding this fixed.

answered Jun 23 '14 at 11:58

WalkerJetBat

75
1
7

That's a complete overkill... you are using `position` and `float` together!! – Fr0zenFyr Jun 23 '14 at 12:01

score 0 · Accepted Answer · answered Jun 23 '14 at 12:05

Solution is here :

DEMO

I have just removed you float property from .profile_Nick class

.profile_Nick
{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 34px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
left:12px;
max-width: 405px;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
}

Your style sheet for .profile_Ranks contain top:50px property I have reduced to display it correctly at the bottom in my demo.

Positioning 2 DIVs top of each other

2 Answers2