Here's the page: http://www.javashack.net/hatj/2yrolds2.html
Now, the black border around the center content area is inconsistent on IE only. On the other 3 browsers, it shows properly.
When viewed on IE, the border (of the content area) has breaks in it as soon as you try to scroll up and down the page. Also, as I add more divs in the content area (#horsebox), the border changes from being at a margin-left of 190px, to having a margin-left of 0px. The content stays where it is supposed to be.
I can't really figure out why, but I'm sure it has something to do with my use of the .clearfix. I'm still tinkering with it to try to figure it out, but I'd appreciate any help along!
.clearfix, IE display problem
one of the benefits of the 'clearfix' is that it doesn't require any extra markup and can be used as a class on the div requiring clearing so you could loose the divs holding the clearingfix at present also nested floats will clear themselves so there is no need for the fix on them.
The border problem can be sorted by using position:relative on the #content but as to the main float problem I think that this probably has no solution ( at least not one I could find) and is just the buggy inherit way IE handles floats which are not straight forward at the best of times.
My suggestion in this instance would be to change the #navcol to position absolute with maybe a left:10px and to position the #container relative to have the #navcol position from the container rather than the body.
Hope that's of some help.