Table size and IE6

I have created a three column format for a page I have at

http://www.kalikalos.com/workshops/compassionate-communication-workshop.html

I have put the 3 cols into a table frame of 82% of the page. This works fine on most browsers but IE6 puts the third (rightmost) column under the 2nd column which looks absolutely awful.

I tried to test for IE6 in the header of my html page with

<style type="text/css">
table { width:82%;}
</style>

<!--[if lt IE 6]>
<style type="text/css">
table { width:95%;}
</style>
<![endif]-->

hoping that this code would give IE6 a 95% table size, but it doesnt work.

Can anybody suggest what I need to do and/or what my error is in the above?

Well, <!--[if lt IE 6]> is going to target IE lower than 6 - try either <!--[if lte IE 6]> (lower than or equal to IE6) or <!--[if lt IE 7]> (less than IE7). (The table is 95% width in IE5.5)

That said, the right column drops in virtually everything at small resolutions, in FF about 863px wide. This is because although you have the column widths set as percentages, at some point the images in the columns become wider than the percentage. In IE6 this forces the column to extend, hence the float drop occurs earlier.

You could just set the width of your table to be fixed at say 1000px, which takes care of all of this.

Incidentally, have a look here (http://bonrouge.com/3c-hf-fluid.php) for a good three column layout that avoids tables.