cross browser newbie question

Question

Hi,

Trying to figure out how IE and Firefox (and any other browsers) treat css for divs differently. I set up three simple divs which display fine in IE(7), but don't display "right" in FireFox(3.0.8). Not complicated, just need a left panel, header and somewhere for the main content. For some reason, in FireFox the header only shows at 400px w instead of the 650px like it should. Can someone point me in right direction to get a good handle on this?

Have a client mockup I already setup this way, then realized FF was messed up. Can post URL for that if helps see what I'm trying to do?

#container
{
position: absolute;   
width: 900px;
left: 50%;
margin-left: -450px;         
top: 0%;
height: 500px;
background-color: Red;
}


#leftContent
{    
width: 250px;
float: left;
height: 500px;
background-color: Green;
}

#header
{       
width: 650px;
height: 150px;
background-color: Lime;
display: block;
}

Answer 1

try

float:right;

on #maincontent

UPDATE-

Answer 2

Add float:left to the header and mainContent.

#leftContent
{    
    width: 250px;
    float: left;
    height: 500px;
    background-color: Green;
    float: left;    
}

#header
{       
    width: 650px;
    height: 150px;
    background-color: Lime;
    display: block;
    float: left;
}

#mainContent 
{
    background-color: Black;
    height: 550px;
    width: 650px;
    float: left;
}

Answer 3

ftp doesn't work for me. http://jsbin.com/ocare3/

Tried a new tack - added a wrapper to the right hand content (#header and #mainContent) and floated that. You also had at the end of the body but no opener...wierd. Anyway - this works for all my browsers. You may want to readdress the height values you have used to make sure everything lines up again