Margin/padding issues in IE

Looks alright in Firefox, messed up in IE

[Sfinx]

I'm layouting a site and am experiencing really annoying issues with stuff not showing up correctly in IE, while it shows exactly as supposed to in Firefox.

More specific, I'm having issues with my margin/padding. Here's the part of the html code:

<div id="content">
<div id="content_top"></div>
<div id="content_main"><div id="content_box"><?php mosMainBody();?></div></div>
<div id="content_bottom"></div>
</div>

I need this structure so I can have a nice background with top and bottom picture, and the main content should show up in the content_box, which is basically just there to have the extra margin. Here's the compliant CSS code:

#content{
float: left!important;
 float: left;
padding: 0;
padding-top: 0;
margin: 0;
 text-align: left;
 width: 599px;
}

#content_top{
 background: url(../images/main_top.jpg) left top no-repeat;
padding: 0;
margin: 0;
 height: 8px;
 width: 599px;
}

#content_main{
 background: url(../images/main_middle.jpg) left top repeat-y;
 padding: 0;
 margin: 0;
 width: 599px;
 text-align: left;
}

#content_box{
 margin-right: 0px;
 margin-left: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 5px;
 padding-bottom: 5px;
 text-align: left;
}

#content_bottom{
 background: url(../images/main_bottom.jpg) left top no-repeat;
padding: 0;
margin: 0;
 height: 8px;
 width: 599px;
}

Now let's take a look at how it shows in firefox and IE:

Firefox

[scoutsbeveren.be ]

Internet Explorer 6.0

[scoutsbeveren.be ]

As you can see, in IE the background picture seems to be moving with the actual content - thus my double div construction isn't working.

Any suggestions?

[edited by: Sfinx at 1:11 pm (utc) on Aug. 18, 2006]

[Sfinx]

Nobody? :(