table to div

Hi,

I’ve been using tables for long enough and I found them pretty easy and compatible for every browser. But nowadays using tables is getting more and more frown upon mostly because of it being slower. (For layout)
Anyway, I want to know how do you create such code with div?

[CODE]
<table width=”100%”><tr>
<td width=”50″>content</td>
<td>content</td>
<td width=”50″>content</td>
</tr></table>
[/CODE]

The right and left TD width is 20 and as the table width is 100%, it lets the middle TD to stretch itself and fit the browser width. The important thing for me here is that the 3 TDs will stick together no matter how happens to the user. For example I can use such thing for a box, and put 2 curve images on the left and right.

I’ve tried this: (I added the border to see what exactly I’m getting)

[CODE]
<div>
<div style=”width: 50px; border: 1px solid black; float: left;”>content</div>
<div style=”width: 100%; border: 1px solid black; float: left;”>content</div>
<div style=”width: 50px; border: 1px solid black; float: left;”>content</div>
</div>
[/CODE]

In this case, when I make the browser width smaller, the divs won’t stick together and they fall on a new line.

And I tried again this:

[CODE]
<div style=”display: table;”>
<div style=”width: 50px; border: 1px solid black; display: table-cell;”>content</div>
<div style=”width: 100%; border: 1px solid black; display: table-cell;”>content</div>
<div style=”width: 50px; border: 1px solid black; display: table-cell;”>content</div>
</div>

[/CODE]

Seems to work, but I have no idea if this is the best way to do so and of course it fails in IE6.

How it is done with divs that works in any browser?
Thanks for your time

Also in #CSS _↴