ShellRox ShellRox - 3 months ago 5x
HTML Question

Placing relative positioned elements in floating DIV

I have been trying to make a profile bar for my website which contained 3 elements, link, picture, and just a text (

), 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>

.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?


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: