Question

Morning,

I have the following HTML:

<div id="sah_padding">
<div id="sah_holder">
   <div id="sah_name">Hello [agent_name]</div>
   <div id="sah_logout"><a href="#" id="logout_link" title="Logout">&#10006;</a></div>
</div>
You are working with [customer_name]
</div>

and I have the following CSS:

#sah_padding{
    padding:10px 10px 10px 10px;
}

#sah_holder{
    padding-bottom:10px;
    clear:both;
}

#sah_name{
    float:left;
    width:50%;
}

#sah_logout{
    text-align:right;
}



#logout_link{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

However my login link and Hello message aren’t aligning correctly, the logout link is a few pixels below the hello message and I need them to be on the same horizontal line. What am I doing wrong?

Answer 1

if you set line-height :1 to #logout_link element, it should correct the alignment
(of course feel free to choose a different value to adjust it)