CODEWITHSUNDEEP
htmlcss
Tom Hanson
Tom Hanson

Reputation: 153

CSS Align Menu to the right of a div

I am trying to align a menu to the right of a div. As it stands the menu is sitting in the div top left. I want it top right... what am I missing? I have added text-align: right.... Ive tried float: right... I just can't get it.

<div id="UserPanel">
<div id="menu">
<ul>
<li><a href="default.php">All Apps</a> | </li>
<li><a href="apps.php">My Account</a> | </li>
<li><a href="newsletter.php">Support</a> | </li>
<li><a href="aboutUs.php">Register / Login</a></li>
</ul>
</div>
</div>

The CSS CODE is

#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
}
#menu
{
text-align: right;
width: 962;
}
#menu ul /* Remove The Bullets */
{
list-style: none;
padding: 0;
margin: 0;
}
#menu li /* Place list in line */
{
float: left;
margin: 0 0.15em;
}
#menu li a /* Design it */
{
font-size: 0.75em;
background: url(background.gif) bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 8em;
display: block;
/* border: 0.1em solid #dcdce9; */
color: #C0C0C0;
text-decoration: none; /* Remove Underline */
text-align: center;
}

Upvotes: 0

Views: 31323

Answers (8)

Tom Hanson
Tom Hanson

Reputation: 153

None of these worked but I did find Arif Khan gave me an idea. I solved this by doing...

#menu
{
position: relative;
left: 500px;
}

Upvotes: 0

Yasitha
Yasitha

Reputation: 2303

Update #menu styles as follows.

#menu
{
text-align: right;
width: 962;
float: right;
}

Upvotes: 0

Akshay
Akshay

Reputation: 1354

First of all you have not defined width and height attribute properly. What i mean is either defined it with px or %; e.g width:962px;

By the way here is an working example http://jsfiddle.net/hT4Bd/1/

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

LIke this

DEMO

CSS

#menu
{
text-align: right;
 float:right;
}

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4609

use this

#menu {
    float: right;
    text-align: right;
    width: auto;
}

here is the jsFiddle Link

Upvotes: 3

Arif Khan
Arif Khan

Reputation: 67

Try this-

#menu
{
position:absolute;
top:0;
right:0;
width: 962;
}

Upvotes: 0

SaturnsEye
SaturnsEye

Reputation: 6509

Add float:right; to #userpanel

Upvotes: 0

heretolearn
heretolearn

Reputation: 6555

Try this:

#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
float : right;
}

JSFiddle

Upvotes: 1

Related Questions