Center a horizontal, left floated menu

[biggieuk]

Hi all,

 

I am trying to implement the menu found at CSS Play: http://www.cssplay.co.uk/menus/basic_dd.html

 

I have a layout which is centered but when i put a container around the menu and set the margins to auto it doesn't centre the menu.

 

Here is the CSS code from the menu:

 

.menu ul{ list-style-type:none; padding:0; }

.menu li{ float:left; position:relative; z-index:100; }

.menu table{ position:absolute; border-collapse:collapse; z-index:80; left:-1px; top:25px; }

.menu a, .menu :visited { display:block; font-size:10px; width:120px; padding:7px 0; color:#000; background:#A5D2EB; text-decoration:none; margin-right:1px; text-align:center;}

.menu :hover{ color:#444; background:#5596E6; }

.menu ul ul { visibility:hidden; position:absolute; width:120px; height:0; }

.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

#divMenuContainer { width:100%; margin-left:auto; margin-right:auto; height:100%}

 

I would really appreciate any help with this.

 

Thanks

[SuperBlue]

Of cause it doesn't center the menu, you are applying a width of 100%, which is causing the problem.

 

Applying margin: 0 auto; to an element will center it in its parent.

 

I trust what you want is the menu inside the #divMenuContainer to be centered, in that case simply apply the margin: 0 auto; on the menu itself instead, also make sure that the width of the menu is smaller then its parent element, otherwhise this won't work.

 

Note that ealier versions of IE require that the parent element has text-align:center; applied, this is then reset on some following element.

[ifubad]

floated elements cannot be centered easily, there is a simple trick for it, read here http://pmob.co.uk/pob/centred-float.htm