Placing relative positioned elements in floating DIV - html

Question

I have been trying to make a profile bar for my website which contained 3 elements, link, picture, and just a text (<p>), profile bar itself was a div container.
The reason of choosing relative position was because of elements overlapping when browser was scaled, but then there was another problem, when browser was scaled, container content would start disappearing and then image would wrap to the bottom of elements.
HTML & CSS for profile bar container:
<div class="profilebar">
<a class="profilename" style="cursor: pointer;" >{{ username }} &blacktriangledown;</a>
<img class="profilepicture" src="{{ avatar }}"></img>
<p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>
.profilename {
position: relative;
margin-top: 0.4%;
margin-left: 4%;
font-family: sans-serif;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.profilepicture {
position: absolute;
margin-left: 1.4%;
}
.balance {
position: relative;
margin-top: 3%;
color: red;
font-family: sans-serif;
font-size: 12pt;
color: #C90205;
margin-left: 45.3%;
}
Fiddle ( Try scaling browser down in fullscreen mode and you'll see the result ).
Is there a problem that container can't make elements float right?, i want it to reach the navigator buttons (Button1-4) without elements inside overlapping each other, what's the best way to do so?

Answer 1

Set a fixed pixel width on the "profilebar" container, rather than a percentage.
.profilebar {
float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1%;
min-width: 70px;
}
Here you can see an example with 150px width:
https://jsfiddle.net/c7qoh9xg/

Answer 2

float: left; causes links to wrap and are there below the menu
See https://jsfiddle.net/hv5r8kxh/4/

Answer 3

Check the updated fiddle - https://jsfiddle.net/afelixj/hv5r8kxh/2/
Changed the order of profilepicture and profilename
*,
*::before,
*::after {
box-sizing: border-box;
}
*::selection {
background-color: #F06262;
}
*::-moz-selection {
background-color: #F06262;
}
html,
body {
margin: 0;
height: 100%;
background-color: #2B2B2B;
}
.main {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 10%;
z-index: 1;
min-height: 120px;
max-height: 120px;
background-color: rgba(26, 26, 26, 0.9);
min-width: 800px;
}
.logo {
display: block;
float: left;
top: 3%;
left: 0;
right: 3%;
/*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
font-size: 32pt;
font-family: sans-serif;
color: white;
margin-top: 3.5%;
margin-left: 1.3%;
}
.menu {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
background-color: rgba(26, 26, 26, 0.9);
width: 100%;
border-style: solid;
border-color: rgba(26, 26, 26, 0.9);
border-radius: 0;
z-index: 1;
/* max-height: 8%; */
/* max-width: 102.5%; */
min-height: 55px;
min-width: 800px;
overflow: hidden;
}
.button1 {
display: block;
font-size: 10pt;
float: left;
right: 15%;
left: 30%;
top: 0%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
padding: 25px 2px 55px 2px;
vertical-align: center;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button1:hover {
color: #C90205;
}
.button2 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 10%;
white-space: nowrap;
color: white;
width: 7%;
margin-top: 0%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
vertical-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button2:hover {
color: #C90205;
}
.button3 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button3:hover {
color: #C90205;
}
.button4 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button4:hover {
color: #C90205;
}
.button5 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button5:hover {
color: #C90205;
}
.button6 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 8%;
white-space: nowrap;
color: white;
margin-top: 0%;
font-family: sans-serif;
height: 10%;
width: 7%;
text-align: center;
height: 10%;
text-align: center;
padding: 28px 0px 55px 0px;
text-align: center;
line-height: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button6:hover {
color: #C90205;
}
.profilebar {
float: right;
width: 11%;
height: 7%;
margin-top: 0.5%;
margin-right: 1%;
min-width: 180px;
}
.profilename {
position: relative;
margin-top: 0.4%;
margin-left: 4%;
font-family: sans-serif;
/* width: 0.5%; */
font-size: 11pt;
color: white;
text-decoration: none;
float: right;
}
.profilepicture {
/* position: absolute; */
margin-left: 15px;
float: right;
}
.balance {
position: relative;
margin-top: 25px;
color: red;
font-family: sans-serif;
font-size: 12pt;
color: #C90205;
text-align: right;
/* margin-left: 45.3%; */
}
.mainpage {
position: relative;
height: calc(93% - 185px);
width: 100%;
min-height: 430px;
min-width: 800px;
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">Sample Text</a>
</div>
<div class="menu">
<a class="button1" href="/" style="text-decoration:none">Button 1</a>
<a class="button2" href="/" style="text-decoration:none">Button 2</a>
<a class="button3" href="/" style="text-decoration:none">Button 3</a>
<a class="button4" href="/" style="text-decoration:none">Button 4</a>
<a class="button5" href="/" style="text-decoration:none">Button 5</a>
<a class="button6" href="/" style="text-decoration:none">Button 6</a>
<div class="profilebar">
<img class="profilepicture" src="http://i.imgur.com/9xyQ4DW.png" />
<a class="profilename" style="cursor: pointer;" >username &blacktriangledown;</a>
<p class="balance" style="text-decoration:none">$0</p>
</div>
</div>
<div class="mainpage"></div>