Help me convert my old (simple) table structure

[MediaSpree]

Lets see if you can help me! Here is my old table structure which basically makes a 2 column layout, centered on the page displaying widgets with some equal padding (lets say they are images, all the same width and height) It works great in firefox and i.e. Trying to translate this to strictly floated divs is giving me a headache when it should be so simple. Any advice you can give me woudl be aprreciated.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center">
<table cellpadding="5" cellspacing="0" boder="0" width="80%">
<tr>
<td align="center">widget 1</td>
<td align="center">widget 2</td>
</tr>
<tr>
<td align="center">widget 3</td>
<td align="center">widget 4</td>
</tr>
<tr>
<td align="center">widget 5</td>
<td align="center">widget 6</td>
</tr>
</table>
</td></tr>
</table>

[Marshall]

<div id="container" style=""margin: 0 auto; text-align: left; width: whateverpx>
<div id="left" style="float:left; width: 50%;></div>
<div id="right" style="float:left; width: 50%;></div>
</div>

If you need separate columns, add:

<div id="container" style=""margin: 0 auto; text-align: left; width: whateverpx>
<div id="left" style="float:left; width: 50%;></div>
<div id="right" style="float:left; width: 50%;></div>
<br style="clear:both />
<div id="left_bottom" style="float:left; width: 50%;></div>
<div id="right_bottom" style="float:left; width: 50%;></div>
</div>

Marshall