Why aren't my divs aligning? - html

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">✖</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)

Answer 2

Give float to your #sah_logout also. Write like this:
#sah_logout{
float: left;
text-align:right;
}
Check this http://jsfiddle.net/QUNT2/

Answer 3

Check the line-height of your elements!!!

Answer 4

You need to set a float to #sah_logout as well:
#sah_logout{
float: left;
text-align:right;
}
You can even make it say, float: right. It's entirely your choice. Doing only a text-align: right will modify how the inner contents of the container behave, not how the div behaves within the flow.
Also, you might have a few problems with the parent div not wrapping correctly around the children divs (as all children now have float properties), so you might need to add another div, with clear: both set in its style:
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
<div style="clear: both"></div>
</div>

Answer 5

Instead of wasting time with block level elements why don't you simply use inline elements for both the "Hello" text and the logout link? That's what inline elements are supposed to do - stay in line with each other.
<div id="sah_padding">
<div id="sah_holder">
<span id="sah_name">Hello [agent_name]</span>✖
</div>
<span>You are working with [customer_name]</span>
</div>
Its is highly unlikely that you would need any of the CSS code you previously used for elements inside sah_holder unless you want to style them differently.

Answer 6

check it your updated html :-
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">You are working with [customer_name]</div>
</div>
</div>
your updated css:-
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
border:1px solid red;
overflow:hidden;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
float:right;
}
.logout_link{
color:black;
text-decoration:none;
font-weight:bold;
}
or you can see the demo:- http://jsfiddle.net/WnecH/11/