[thelist] CSS Width Issue

[Drew Shiel]

Hi folks;

I'm having an interesting CSS issue here in Internet Explorer 6 - not 
showing in Firefox or Opera.

Extracts from my code:

HTML:

<div id="container">
     <div id="info"></div>
     <div id="content"></div>
</div>

CSS:

#container {
	width: 778px;
	position: absolute;
	left: 50%;
	margin-left: -375px;
	border-left: 1px solid #382A7E;
	border-right: 1px solid #382A7E;
}
#info {
	width: 211px;
	float: right;
}
#content {
	width: 566px;
	border-right: 1px solid #382A7E;
}


Now, what's happening in IE is that the info div is too wide, and is 
pushing the content div down the page. Reducing the width of the info div 
by 3 pixels to 208 makes it narrow enough, but this isn't ideal - I need 
every pixel of that 211.

My first conclusion on some research was that this is a manifestation of 
IE's box-model problems, wherein it puts borders inside the total width, 
not outside, so that IE would only see 776 pixels to work with #container. 
However, widening #container by 2px to give it the "full" 778 didn't work - 
and leaves some ugly gaps in Firefox and Opera.

The 3-pixel difference does lead to to think that it might be something to 
do with the borders, though...

Anyone able to explain to me what's happening here?

Drew.