How do I center a dynamic div?

How do I center a dynamic div?

I'm not sure if this question has been answered (I think it probably has),
but how do you center this dynamic div?
(I want #two to align itself to the middle position of #one.)
Right now my jsFiddle does this: http://jsfiddle.net/sE8Sc/4/
HTML :
<div id="one">
</div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
CSS :
#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px;
float:left; }
I've tried margin:0 auto;, text-align:center; but still no dice. I'm not
looking at declaring a defined margin like margin:0 41%; because if I
wanted to add another <a class="stuff"> to the list it would get out of
position...
Anyone? This is probably some simple positioning error that I can't figure
out.
EDIT : I was looking around, and I saw this demo by Nivo Slider --
http://demo.dev7studios.com/nivo-slider/ -- how is it defining itself with
a 960px width?