CSS text-align property in nested div elements

HTML & CSS
1

I can’t seem to get my text within my divs to right align. If anyone could throw out a few pointers, errors, or suggestions that would be much appreciated.

Should I instead be using an inline list with floats?

Code:

<style type="text/css">
#accountNav {
	position: relative;
}
#accountNav div.accountcontainer {
	width: 50%;
	position: absolute;
	right: 25px;
}
#accountNav div.accountcontainer div {
	text-align: right;
}
#accountNav a {
	float: left;
	margin: 5px 10px 0px 10px;
	white-space: nowrap;
	font-weight: bold;
	text-decoration: none;
}
</style>

<div id="accountNav">
<div class="accountcontainer">
<div style="">
<a href="login url">Login</a>
</div>
<div style="float: left; margin: 5px 2px 0px 2px;">
|
</div>
<div style="">
<a href="view cart url">View Cart</a>
</div>
<div style="float: left; margin: 5px 2px 0px 2px;">
|
</div>
<div style="">
<a href="check out url">Check Out</a>
</div>
</div>
</div>
2

I’m not super mr. css guy so I’m assuming I’m missing something that is keeping my text alignment code from working the way I want it to.

I need the entire nav content to be aligned to the right side of the ‘div.accountcontainer’ but even when it is coded like so:

#accountNav div.accountcontainer {
	width: 50%;
	position: absolute;
	right: 25px;
        [B]text-align: right;[/B]
}
#accountNav div.accountcontainer div {
	[B]moved to above[/B]
}

The alignment is not what I want.
The entire text/content in the accountcontainer div (div.accountcontainer) is aligned to the left but I need it aligned to the right…

Any ideas on how to accomplish this. I’ve also coded out a quick left float list, but I still can’t get the content to align right.

3

Am going to assume you mean that you want this whole menu placed to the right. BTW, it’s better to code a menu as a UL than as separate lists (the HTML is more semantic that way)

I coded the solution as such.


CSS
#accountNav {
	float:right;
	/* if you have resests you prolly wont need this part*/
	list-style:none;
	padding:0;
	margin:0;
}
#accountNav li  {float:left;}
#accountNav li a {
	float: left;
	 padding:0 10px;
	white-space: nowrap;
	font-weight: bold;
	text-decoration: none;
}
#accountNav li + li a {border-left:1px solid #000;}


HTML
     <ul id="accountNav">
          <li><a href="login url">Login</a></li>
          <li><a href="view cart url">View Cart</a></li>
          <li><a href="check out url">Check Out</a></li>
     </ul>
4

Huh yea I feel retarded now haha :smashy: dur de dur. So if I want everything to float to the right I would just USE ‘float right’ LOL. Makes sense, thanks! :teach:

I was so focused on aligning the text I didn’t think about floating it to the right… :injured:

5

Thank you for your help dresden_phoenix!!

This is what I ended up doing
CSS:

#accountNav {
    position: relative;
}
#accountNav div.accountcontainer {
    float: right;
    width: 303px;
    position: absolute;
    right: 0px;
}
#accountNav div.accountcontainer ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#accountNav div.accountcontainer li{
    float: right;
    margin: 3px 0px;
}
#accountNav a {
    display: block;
    width: 100px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    color: #4a7ba6;
}

#accountNav a:visited {
text-decoration: none;
color: #4a7ba6;
}

#accountNav a:hover {
text-decoration: none;
color: #097054;
}

#accountNav a:active {
text-decoration: none;
color: #FF9900;
}

HTML:

<div id="container">
    <div id="accountNav">
<div class="accountcontainer">
<ul>
<li><a href="checkout url">Check Out</a></li>
    <li style="border-left: 1px solid black; border-right: 1px solid black;"><a href="account url">My Account</a></li>
    <li><a href="cart url">View Cart</a></li>
</ul>
</div>
</div>