IE6 float problem - 3 col layout

[Speccy]

Hi,

I'm building a CSS-based 3 column site, which is appearing as it should in EVERY browser EXCEPT ...you guessed it ...IE 6. The peculiar thing is that all renders fine even in IE5.01 and 5.5 (PC) and IE5 (Mac).

XHTML Transitional validates; CSS validates. Site fine in Opera (PC and Mac); Firefox (PC and Mac); Netscape (PC and Mac); IE5 and IE5.5 (PC); IE5 (Mac); Safari (Mac).

The only issue with the page is that I have images in the right hand column (which will be banner ads when the site goes live) which choose to ignore the DIV they're in and shift left if there's little content in the centre column. If there is content filling the middle column, then just the bottom two images move down. Hrrmph.

The three column area is created using 3 x divs, two floated left, one floated right. Floating all left makes no difference.

I've tried floating 'em all right (fixes the image wrapping, but peculiar things happen in IE6; screws up Firefox 1.5) and generally juggling all I can think of ...but to no avail. Placing <br /> or <p></p> around the images doesn't affect anything.

I've previewed pages at http://virco-hosting.com/SITEPOINT/ie6.asp and http://virco-hosting.com/SITEPOINT/ie6ii.asp. All's exactly as I have it locally, apart from removing client logo for whom site is being developed.

CSS is at http://virco-hosting.com/SITEPOINT/ie6.css. The three DIVs in question are #navigation, #rightnavigation and #content.

Any guidance, help, bug fixes much appreciated. Thanks!