if I open the black border one (sorry cant remember the class name "main_border" and "main_wrapper_centered") to 999px like I have done now - it works but then i get an extra right hand column in pink?
The DIV "#banner" contains the un-closed div "#banner2", but what you are describing sounds typical of IE6 a.k.a. 'the problem child'. It incorrectly expands to contain the contents (if any).
-Why would you want a 7-px tall 'div' anyway? "20px" is the thickness of a scrollbar and you can't even put text in something that small without some serious reductions of padding and margins. This actually sounds like a presentational element, not a content element (it is there for looks only)?.
Presentational you might better use the dic #banner with a 7-px border-bottom:
Actually, it doesn't fit into 796px, nor does it fit into 976px which is probably what you meant to type - when you add up the left and right columns plus the centre colums and the outer borders you get 982px.....
All those floats and 100% widths are also a problem - most of those floats aren't required - let things flow naturally.
I did a few changes to some of the css in core.css file and it seems to work fine. Changes only are: