Question

I’m in the process of creating a header section for a webapp. I’m having some difficulty aligning and positioning things the way it should.

The logout button you see there on the right should move up into the light grey area. So in other words, in the same lign as the logo. This is the html for that section:

<div>

    <img src="Images/logo.png" id="imgLogo" alt="" />
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />

</div>

The CSS for these elements:

#imgLogo{
    margin: 0 auto;
    display: block;
}

#imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}

What am I doing wrong? What can I do to get that darn logout button to move more to the top?
Thanks in advance!

Answer 1

If you set the

 #imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    } 

to

 #imgLogout{
     position: absolute;
     top: 4px;
     right: 10px
     } 

this will put it where you want it.