Question

I am making a website for someone and I want it to resize itself depending on the screen resolution and the zoom of the browser(I am not including smartphones). I currently have a menu wich is like that :

every element in the menu is in a div and here is the css:

#barre_utilisateur //For the menu bar(the red bar)
{
    height:45px;
    background-color:#A31E39;
    width:100%;
}
#content_boutton_accueil //the home button
{
    margin-left:2%;
    width:200px;
    display:inline-block;
}
#notification //exclamation mark button
{
    cursor:pointer;
    width:60px;
    height:45px;
    display:inline-block;
}

and now, I want the cogwheel icon the stick on the right on the left of the user button. I don’t see how I can achieve this.

Also, when I zoom in too much the righ part of the menu get out of where it is supposed to be is there a way to prevent this?

A good example of what I am trying to achieve is the new outlook live page

Answer 1

You can position the overall menu div (#barre_utilisateur) relatively, and then its children absolutely in it. For example:

#barre_utilisateur {
   position: relative;
} 

#cogwheel {
   position: absolute;
   right: 0;
}

Another way could be to have 2 divs inside the menu (#barre_utilisateur), and then to float the first one to the left and the other – to the right.