100% width 3 cell table to tableless

[Koobgut]

Hello,

I am having trouble converting the following example table into a nice tableless layout:
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><img src="./left_image.gif" border="0" /></td>
<td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td>
<td><img src="./right_image.gif" border="0" /></td>
</tr>
</table>
The main problem is that center 100% width cell. A 100% width div with a div either side doesn't work... Any ideas on how I would go about this?

[WebJoel]

....<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><div style="width:33%; height:500px; float:left;"></div></td>
<td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td>
<td><img src="./right_image.gif" border="0" /></td>
</tr>
</table>....

<div style="width:100%; height:500px; border:1px solid silver;"><!-- 'table' replacement -->

<div style="width:33%; height:500px; float:left;"><!-- left cell -->

<div style="width:34%; height:500px; background: url(./bg_image.gif) top left repeat-x; float:left; border-left:1px solid gray;border-right:1px solid gray;>Content</div><!-- middle cell -->

<div style="width:33%; height:500px; float:left;"><!-- right cell -->
<img src="./right_image.gif" border="0" /></div>

</div>
Something like this? The borders are added to show boundries, -and may cause a horizontal scrollbar to appear(??) Note that the middle DIV is 34%.
Some adjustments probably are needed (to amend for border-widths, -try making middle DIV be 33%, or even 32%??), but this is a start.

This is how your TABLE is coded. A "100% width middle cell" makes no sence. Otherwise, you want to have three <TR>s, and the DIV replacement would be equally different (but do-able).

[WebJoel]

post-30-minute edit: -checked code, neglected closing </div>, adjust a width, added meaningful content. Looks better.

<div style="width:100%; height:500px; border:1px solid silver;"><!-- 'table' replacement -->

<div style="width:33%; height:500px; float:left;"><!-- left cell --></div>

<div style="width:33%; height:500px; background:#ececec url(./bg_image.gif) top left repeat-x; border-left:1px solid gray; border-right:1px solid gray; float:left;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p></div><!-- middle cell -->

<div style="width:33%; height:500px; float:left;"><!-- right cell -->
<img src="./right_image.gif" border="0" /></div>

</div>