Statement of Intent

inannajones is going away to Oxford for ten days, leaving tomorrow. I intend to be an anti-social bastard for the duration, with intention to play a great deal of Dark Age of Camelot, and read the vast pile of books I have. Therefore, if I don't answer the phone, don't acknowledge you on talker or IM, don't post to livejournal, and don't answer your email, that's why.

Of course, having stated my intentions thus, I'll probably suffer from an intense need to be sociable.

CSS Layout Query

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?

EDIT: Solved by loupblanc, by adding "float: left;" to #content. Genius!