Using pure CSS to squish as nicely as a table/CSS version of sa

[juhlster1021]

I have a table layout that "squishes" really well. ... Is there anyone out there who can help me to get the same behavior without tables?

The content is in a 3-col table (table id="content"). As the browser window gets narrower, the center column squishes, with the side columns maintaining their 160px width until the middle column is fully squished (i.e., until it gets as narrow as its widest word or image). Then the side columns also begin to squish until they are fully squished too. And then the content finally begins to disappear off to the right side.

The content table is housed in the center column of another table (id="wrapper"). Two colums on either side just center the content in windows wider than 800px.

I would like to do the same with table-free CSS, but can't get it to work. For example, as soon as I set widths etc. in CSS, it no longer will squish well in small windows, or will widen excessively for wide windows. Here's the short version of the CSS and html:

table#wrapper { 
width: 100%; 
} 
table#wrapper td.centerme { 
width: 800px; 
} 
table#content td#middle { 
background: yellow; 
padding: 18px; 
} 
table#content td#leftside, table#content td#rightside { 
width: 160px; 
padding: 18px 4px; 
background: lightgreen; 
} 

<table id="wrapper"><tr><td class="edge">&nbsp;</td><td class="centerme"> 
<table id="content" cellspacing="0"> 
<tr> 
<td id="leftside"> 
Left side text. 
</td> 
<td id="middle"> 
These table cells squish so nicely. Now to get CSS to work as nicely. 
</td> 
<td id="rightside"> 
Right side text. 
</td> 
</tr> 
</table> 
</td><td class="edge">&nbsp;</td></tr></table>  

Thanks for looking.

[Moby_Dim]

Look through resource(s). There are a lot of...

[moltar]

Look at SuzyUK's post "2, 3, Multi Column CSS Templates and Layouts [webmasterworld.com]"

[juhlster1021]

Thanks for the link to SuzyUK's dandy compilation. I'll flag it while working on this.

None of her samples act the way the above code does. For example, div content in most of the samples either doesn't collapes at all or it overlaps as the width gets smaller.

Her fifth example comes closest, but crashed my IE/mac several times. I'll try tearing it apart. I'd like to get this to work without 40% of my CSS being hacks. This may just be a case where it can't be done except with tables. Que sera, sera.

Thanks again.