Centering Horizontal Menu with Even Widths in Fixed-Size Container

HTML & CSS
1

I have this menu:
<div id=“mainmenu”>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>

inside a container (width of 957px). What I’m trying to do is not only center the menu within the container but also trying to get the menu to fill the width of the container. I can’t seem to figure out how to do that without the menu flowing OUTSIDE or BEYOND the container width.

Also, I have it set to absolute because my next layer will be a rather large image behind the menu.

CSS:

.mainmenu {
	position: absolute;
	margin-top: 7px;
	top: 0px;
	left: 0px;
 line-height: normal;
	z-index: 1000;
}

.mainmenu ul {
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: normal 14px Georgia, "Times New Roman", Times, serif;
	background: rgba(0,0,0,.5);
}

.mainmenu ul.menu li {
margin: 0px;
display: inline;
list-style-type: none;
padding: 10px 0px;
border-left: 1px solid #737476;
}

.mainmenu ul.menu li.first-child {
	border-left: none;
}

.mainmenu ul.menu li a, .mainmenu ul.menu li a:link, .mainmenu ul.menu li a:active, .mainmenu ul.menu li a:visited {
color: #FFF;
padding: 10px 55px;
text-decoration: none;
text-transform: capitalize;
}

.mainmenu ul.menu li a:hover {
	color: #000;
	background: #FFF;
}

Thank you!

2

Give the div the background and the ul the fixed width and margin auto.

Here are all the ways to do it. http://www.visibilityinherit.com/code/center-nav.php

Edit- Depending, you’ll prob want to remove that position absolute on the div too.

3

This is what I need it to look like

4

Hi,

You can’t really do it automatically (not without a lot of trickery). You could use display:table and display:table-cell properties to make it fit automatically but they are not supported in ie6 and 7.

I would just float each one left and give them widths to fit exactly.

5

Thank Paul O’B’.

I wound up setting an em width on the line items and adding a special padding-right (just a tad) to the last line item since it wasn’t filling up to the full width. Looks good!

Thank you!