Problem getting 3 colum fluid layout to work in ie6, ie7 and ff

[raphael232]

Hi, i've always used

http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html

as a template when making my sites. However i've always had the problem that the middle column border widths would get overlapped by the left and right columns. I've spent the last few hours trying to overcome this problem without complete success. Here's what i come up with:

http://www.flixon.com/Template.zip

The problems i have are:

1. In ie6 you have to reload the page for the left column to be the in the correct place.

2. The right column is too far to the left in ie7. I assumed this would be because i put:

#leftColumn {
	float: left;
	width: 205px;
	margin: 0 -205px 0 -208px;
	z-index: 4;
}

#rightColumn {
	float: right;
	width: 205px;
	margin: 0 -208px 0 -205px;
	z-index: 2;
}

to fix a problem in ie6 when initally i had:

#leftColumn {
	float: left;
	width: 205px;
	margin-left: -208px;
	z-index: 4;
}

#rightColumn {
	float: right;
	width: 205px;
	margin-right: -208px;
	z-index: 2;
}

both ways seem to work fine in firefox though. I tried the second method in ie7 aswell and it's better but it still is a pixel out.

Any help on these two problems you be much appreciated. Thanks