centre a div in a div containg list..

ok, as the title may be a little confusing

this is my dilema

<div id="div1">
<div id="div2>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
</div>

the div 1 houses div 2
a box in a box

i have my div 1 set up fine.

but how do i auto width div 2 and centre it inside div 1?

i dont want to set a certain width for div2 so id rather have it auto, but it sits to the left and i want it in the centre?
how can i do this.. before i took my 6 month period off from coding i could do this.. now im a little rusty

 

The following code may work.

#div2 {margin: 0 auto;}

Code (markup):

 

just tried it and it didnt work...

 

<div id="navbar">
	<div id="navigation" align="center">
		<ul>
		<li><a href="index.php">Home</a></li>
		<li><a href="about.php">About Us</a></li>
		<li><a href="events.php">Events</a></li>
		<li><a href="whattoexpect.php">What To Expect</a></li>
		<li><a href="termsandconditions.php">Terms and Conditions</a></li>
		<li><a href="contact.php">Contact Us</a></li>
	        </ul>
	 </div>
</div>

Code (markup):

#navbar {
	display:block;
	width:100%;
	height:50px;
	background-image:url(images/navbg.png);
	background-repeat:repeat-x;
	margin-bottom:20px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
#navigation {
	display:block;
	width:auto;
	height:50px;
	font-family:Rockwell;
}
#navigation ul {
	list-style-type:none;
}
#navigation li {
	display:inline;
}
#navigation a {
	display:block;
	float:left;
	width:auto;
	height:35px;
	padding-top:15px;
	padding-left:20px;
	padding-right:20px;
	color:#000000;
	font-size:16px;
	text-decoration:none;
}

Code (markup):