Floating a table larger than the screen width

Hi. For a class awhile back I had to display the results of a database in a table, and being the masochist I am I thought to play with floated divs in order to lay the table. Unfortunately, if the table extended beyond the width of the screen the whole box jumped below the left-hand box. After fighting for a couple of days I conceded defeat and absolutely positioned the box that held the table. I've attached a screenshot of my absolute-positioned piece of work.

Months later, this problem keeps haunting me. I solved another problem by using larger box elements to group smaller ones together like this:

style:
body
{
background-color: #ffffff;
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 10pt;
font-weight: normal;
}

.box
{
width: 100%;
border: 2px red dashed;
}

#header
{
border: 1px green dashed;
background: green;
width: 100%;
}

#left
{
border: 1px blue dashed;
width: 130px;
float: left;
text-align: left;
}

#content
{
border: 1px red dashed;
float: left;
margin: 0;
}

body-html:
<div class="box">
<div id="header">
<h1>this is my header</h1>
</div>
</div>

<div class="box">
<div id="left">
<h3>Main Menu</h3>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
<li>Menu Option 3</li>
<li>Menu Option 4</li>
<li>Menu Option 5</li>
<li>Menu Option 6</li>
</ul>
</div>
<div id="content">
<h1>Main content window</h1>
<table align="center" border="1" cellpadding="3" cellspacing="0">
<tr>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
<td>Test&nbsp;Field</td>
</tr>
</table>
</div>
</div>

But because the table is too wude it jumps below the menu. Anyone else have experience fixing somthing like this?