Problem with floats in IE6

Hi,

I'm working on a site, villagefantome.ca, but I just discovered that
IE6 doesn't render it correctly.

There is a main div (main) in the center of the page containing all
the content, then there is some header content and then a news div
floated to the left and a content div floated to the left.

Here is the CSS for those DIVs:

..main{
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: black;
font-size: 1.2em;
text-align: center;
overflow: auto;
background: black url('../images/bg-principal.jpg') repeat-y scroll;
}

..content {
width: 780px;
float: left;
background-color: black;
background: black url('../images/bg-content.jpg') repeat-y scroll;
}


..news {
width: 220px;
float: right;
background-color: black;
text-align: left;
font-size: larger;
background: black url('../images/bg-news.jpg') repeat-y scroll;
}

My problem, only visible in IE6 or older (works in IE7, Firefox, Opera
and Safari), is that the content div gets shifted under the news div,
it doesn't sit by it's side.

If anyone can tell me if I did something wrong or if it's a IE6 bug,
or to work around it, it would be really appreciated.

Thanks

On Sep 26, 6:01 pm, seb....RemoveThis@gmail.com wrote:
> Hi,
>
> I'm working on a site, villagefantome.ca, but I just discovered that
> IE6 doesn't render it correctly.
>
> There is a main div (main) in the center of the page containing all
> the content, then there is some header content and then a news div
> floated to the left and a content div floated to the left.
>
> Here is the CSS for those DIVs:
>
> .main{
> width: 1000px;
> margin-left: auto;
> margin-right: auto;
> background-color: black;
> font-size: 1.2em;
> text-align: center;
> overflow: auto;
> background: black url('../images/bg-principal.jpg') repeat-y scroll;
>
> }
>
> .content {
> width: 780px;
> float: left;
> background-color: black;
> background: black url('../images/bg-content.jpg') repeat-y scroll;
>
> }
>
> .news {
> width: 220px;
> float: right;
> background-color: black;
> text-align: left;
> font-size: larger;
> background: black url('../images/bg-news.jpg') repeat-y scroll;
>
> }
>
> My problem, only visible in IE6 or older (works in IE7, Firefox, Opera
> and Safari), is that the content div gets shifted under the news div,
> it doesn't sit by it's side.
>
> If anyone can tell me if I did something wrong or if it's a IE6 bug,
> or to work around it, it would be really appreciated.
>
> Thanks

Sorry, made a mistake, here is the code:

..main{
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: black;
font-size: 1.2em;
text-align: center;
overflow: auto;
background: black url('../images/bg-principal.jpg') repeat-y
scroll;

}

..content {
width: 780px;
float: right;
background-color: black;
background: black url('../images/bg-content.jpg') repeat-y
scroll;
}

..news {
width: 220px;
float: left;
background-color: black;
text-align: left;
font-size: larger;
background: black url('../images/bg-news.jpg') repeat-y
scroll;
}

The news section is on the left, not the right.