CODEWITHSUNDEEP
htmlcss
Mark Sandman
Mark Sandman

Reputation: 3333

Why aren't my divs aligning?

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?

Upvotes: 0

Views: 310

Answers (6)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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)

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7778

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"><a href="#" class="logout_link" title="Logout">You are working with [customer_name]</a></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/

Upvotes: 0

Jannis M
Jannis M

Reputation: 745

Check the line-height of your elements!!!

Upvotes: 1

user188654
user188654

Reputation:

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><a href="#" id="logout_link" title="Logout">&#10006;</a>
    </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.

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Give float to your #sah_logout also. Write like this:

#sah_logout{
    float: left;
    text-align:right;
}

Check this http://jsfiddle.net/QUNT2/

Upvotes: 1

Rohan Prabhu
Rohan Prabhu

Reputation: 7302

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"><a href="#" id="logout_link" title="Logout">&#10006;</a></div>
    <div style="clear: both"></div>
</div>

Upvotes: 0

Related Questions