Centering nav bar within block element

Get Started
1

I’m trying to absolutely center the nav bar on this page. I thought that these associated rules would’ve done it, where the naventry elements have margins on both sides, and are nested inside the navwrap element, which centers its contents. Instead, I find that they “lean to the left” (or to the right when the float is assigned that way).

Any advice is appreciated. Style sheet is here.


#navwrap{
	clear: both;
	min-height:80px;
	margin: 0px auto;
	max-width: 800px;
	min-width: 400px;
	background-position: center;
	text-align: center;
}
#naventry{
	max-width: 1000px;
	margin-top: 4px;
	margin-right: .5%;
	margin-left: .5%;
	margin-bottom: 4px;
	background-color: #FFFFFF;
	clear: none;
	float: left;
	padding: 2%;
2

Hi Richmilnix. There are some ways to center widthless navigation item like that. Here are some examples:

Centered Inline-Blocks with Cross Browser Node Fix

CSS examples - Centred Floats

Note a few things, thouhg. It’s best to use a UL for this kind of thing, as in the examples above. Also, it’s not allowed in TML to nest block level elements (like divs) inside inline elements (like <a>s), so that’s another good reason to update your code. :slight_smile: