How to float a menu on the right within a div?

  • Thread starter Thread starter bogdan
  • Start date Start date
B

bogdan

Hi,

I have a div to provide a background image for a menu. I'd like to position
the menu on the right side but I can't seem to find a right way of doing it.
The only way the menu will move to the right if I set text-align=right in
the div. The problem is that menu items are then also aligned on right
side. Not only that but this alignment works only in IE.

Could someone please let me know how to right-align the menu?

Menu:
<div id="menuArea">
<asp:Menu ID="topMenu" runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="false"
DataSourceID="dsSiteMap">

<StaticMenuItemStyle CssClass="staticMenu" />

</asp:Menu>
<asp:SiteMapDataSource ID="dsSiteMap" runat="server"
ShowStartingNode="False" />
</div>

CSS:
#menuArea
{
background-image: url(Images/header_menu.gif);
background-repeat: no-repeat;
clear: both;
padding-right: 10px;
padding-left: 0%;
font-weight: normal;
font-size: 0.8em;
float: none;
padding-top: 0%;
padding-bottom: 0%;
margin: 0%;
color: #477897;
width: 720;
height: 39px;
/*text-align: right;*/
}

..staticMenu
{
background-color: Transparent;
float: right;
}

Thanks,
Bogdan
 
I found the problem. I had <StaticMenuItemStyle> placed twice (not shown in
my original post) instead of <StaticMenuStyle> and <StaticMenuItemStyle>. I
thought I'd save some time by copy 'n paste but instead burnt few hours.
Lesson learned.

Bogdan
 
Back
Top