Problems displaying two tables in a div in IE - html

Question

I'm trying to display two tables inside a container div and it works perfectly in Firefox, and does exactly what I am expecting, but in IE it shifts my second table to appear outside my div. Anyone got any ideas what the issue is that I am running into here? If I put either table in by itself there is no problem, but when I add the second table, regardless of which one come first, I get the problem.
Code for tables:
<div id="contentContainer" style="border: 1px solid black;">
<table id="filterPostingsTable" align="Left" border="0" style="width:100%;">
<tr>
<th>Status</th>
<th>PositionTitle</th>
<th>Classification</th>
<th>Location</th>
<th>Filter</th>
</tr>
<tr>
<td align="center">
<select name="filterStatus" id="filterStatus">
<option selected="selected" value="">Select Status</option>
<option value="Active">Active</option>
<option value="Interviewing">Interviewing</option>
<option value="New">New</option>
</select>
</td>
<td align="center">
<input name="filterPositionTitle" type="text" id="filterPositionTitle" />
</td>
<td align="center">
<select name="922e5a87-18fd-467f-9e7b-f4210fbd93ea" id="922e5a87-18fd-467f-9e7b-f4210fbd93ea">
<option value="0">Select One...</option>
<option value="9c2e6df7-e319-478c-b137-47eff4e4748d">Administrative</option>
<option value="78ce598b-6dad-4434-9bb5-24429c630943">Certified</option>
<option value="c75f18a4-e503-428c-8e23-83d1dac21997">Classified</option>
<option value="77232a27-2c58-4192-bbbf-1b0b493da564">Other</option>
</select>
</td>
<td align="center">
<select name="filterLocation" id="filterLocation">
<option value="Select Location">Select Location</option>
<option value="77c68429-e878-4778-b467-0d684308b188">Desert Foothills</option>
<option value="d226f2a3-02c4-40c5-b784-949c22647081">District Office</option>
</select>
</td>
<td align="center">
<input type="submit" name="filterJobs" value="Filter Postings" id="filterJobs" />
</td>
</tr>
</table>
<table id="jobPostingsTable" class="tablesorter" align="Left" border="0" style="width:100%;float: left">
<thead>
<tr>
<th></th>
<th>Status</th>
<th>Position Title</th>
<th>Classification</th>
<th>Working Location</th>
</tr>
</thead>
<tbody>
<tr id="2a62a993-fc3a-4a43-96b6-fd663a724b6e">
<td>
<input id="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" type="checkbox" name="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" />
</td>
<td>New</td>
<td valign="middle">
<span>Systems Analyst</span>
<img src="images/pdf.png" style="border-width:0px;" />
</td>
<td>Classified</td>
<td>District Office</td>
</tr>
</tbody>
</table>
</div>
Applicable CSS is as follows:
#contentContainer {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:auto;
margin:0;
width:1000px;
}
All tables are set to width of 100%. The buttons in the image don't really matter as they don't seem to affect the table problem whether they are there or not. Usually this sort of thing works just fine, but in IE 7 it is now rendering as follows:

Answer 1

If you want to float your tables, they will need a width in pixels, not percent.