How to move the bottom div to infront of the top one - html

Question

I need help with moving the profile-options div.
Here's an image so I can show you what I mean, the code is provided below the image.
Picture
index.html
<div id="page">
<div id="content">
<div id="info">
<div id="profile" name="picture">
<img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-9/17021559_243918039403378_4935600322061460678_n.jpg?oh=aa472121820d78b6116c91d47557bce6&oe=59738E5C" name="profile" />
<img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-9/17098689_244217759373406_3036940291705168436_n.jpg?oh=5f7b2ead37fdec3c2b13fa60fe431a0c&oe=5924FEA8" name="frontpage" />
</div>
<div id="menu" name="profile-name">
Random Guy
</div>
<div id="menu" name="profile-options">
Hi
</div>
<div id="personal">
<ul>
<!-- fields about the user profile -->
<li>Password: *****************************</li>
<li>Country: Bosnia & Herzegovina</li>
<li>City: not choosen</li>
<li>Address: not choosen</li>
<li>Phone number: not choosen</li>
</ul>
</div>
</div>
</div>
</div>
style.css
#page #content #info #profile[name="picture"]
{
width:700px;
}
#page #content #info #profile[name="picture"] img[name="profile"]
{
width:128px;
height:128px;
}
#page #content #info #profile[name="picture"] img[name="frontpage"]
{
width:572px;
height:128px;
margin-left:-4px;
}
#page #content #info #personal
{
width:698px;
}
#page #content #info #menu[name="profile-name"]
{
background-color:#d8d8d8;
width:116px;
height:48px;
max-width:116px;
max-height:48px;
border:0px;
padding:6px;
word-wrap:break-word;
margin-top:-5px;
}
#page #content #info #menu[name="profile-options"]
{
background-color:#d8d8d8;
width:572px;
height:48px;
border:0px;
margin-top:-5px;
}
How can I achieve this without using any position commands or margin, I tried left:0px and top:0px but did not work.
‎
‎
‎
‎
‎
‎
‎
‎

Answer 1

Try adding the float left property:
#page #content #info #menu[name="profile-name"]
{
background-color:#d8d8d8;
width:116px;
height:48px;
max-width:116px;
max-height:48px;
border:0px;
padding:6px;
word-wrap:break-word;
margin-top:-5px;
float: left;
}

Answer 2

#menu {
display: inline-block;
}
https://jsfiddle.net/zkmuxayq/

Answer 3

Just add 'float:left/right' to both of them and make sure their width sum is not larger than 100%.
.div {
position:relative;
float:left;
height:50px;
}
.left {
width:20%;
background-color:grey;
}
.right {
width:80%;
background-color:black;
}
<div class="div left"></div>
<div class="div right"></div>

Answer 4

You have some issues.
First of all, ids must be unique and you have 2 "menu" ids.
To achieve what you want, you have to set "display: inline-block" to the 2 divs.

Answer 5

You need to add a float left to profile-name. Currently if you inspect that element you can see it is taking up the full width of the screen.
#page #content #info #menu[name="profile-name"]
{
background-color:#d8d8d8;
width:116px;
height:48px;
max-width:116px;
max-height:48px;
border:0px;
padding:6px;
word-wrap:break-word;
margin-top:-5px;
float: left
}