Centering nested divs

[Gazzieh]

I have searched high and low but cannot find a satisfactory answer. I have a menu system defined by nested divs within a single div. To maintain the nested divs in a horizontal pattern I have used float: left but I want the overall menu centred on the page; not left aligned as they are at present. I have used the text-align: center within the parent div and have used the margin: 0 auto as well but to no avail. The code follows:

#nav
	{
    text-align: center;
	height: 1.5em;
	}

.nav_element
	{
	float: left;
	padding-right: 30px;
	}

<div id="nav">
    <div class="nav_element"><a href="index.html">Home</a></div>
    <div class="nav_element"><a href="holding.html">Music</a></div>
    <div class="nav_element"><a href="holding.html">Websites</a></div>
    <div class="nav_element"><a href="holding.html">Favourites</a></div>
...and so on...
</div>

 

[Vragabond]

You cannot do that. The best approximation would be to set a width for the #nav div and center that one via auto margins on left and right.

Alternatively, you could work with inline elements, using ul as your container that has text-align: center; specified to it and list elements as inline elements with links inside.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Gazzieh]

I do hate that term: cannot do it! )

Thanks for the help. I'm avoiding using ul but may look into it. Setting the parent div width would work but I am trying to make the system as dynamic as possible.

Oh well. I tried.

 

[Vragabond]

Not really sure why you're avoiding using unordered list. Using lists to create navigation lists is much more semantic than using a bunch of divs nested inside other divs. Use different elements that you can HTML to show what your content is all about.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]