Strange CSS behavior with box and multi-column list

Strange CSS behavior with box and multi-column list

I'd like a three-column list inside a grey box:
<div style="width:500px;font-size:21px;background:#f5f5f5;margin:0 0 40px
100px;padding:1px;border:3px solid black;">
<div style="text-align:center;margin:10px 0px 0px 0px;"><strong>Table of
Contents</strong></div>
<ul style="float:left;width:33%;list-style-type:none;">
<li>Book 1.</li>
<li>Part 1.</li>
<li><a href="#S1">Section 1.</a></li>
<li><a href="#S2">Section 2.</a></li>
<li><a href="#S3">Section 3.</a></li>
</ul>
<ul style="float:left;width:33%;list-style-type:none;">
<li>Book 2.</li>
<li>Part 1.</li>
<li><a href="#S4">Section 1.</a></li>
<li><a href="#S5">Section 2.</a></li>
<li><a href="#S6">Section 3.</a></li>
</ul>
<ul style="float:left;width:33%;list-style-type:none;">
<li>Book 3.</li>
<li>Part 1.</li>
<li><a href="#S7">Section 1.</a></li>
<li><a href="#S8">Section 2.</a></li>
<li><a href="#S9">Section 3.</a></li>
</ul>
</div>
But the results are not pretty: http://jsfiddle.net/gq2gh/
Can anyone explain what's going on, and/or fix it? Thanks.