跨浏览器新手问题

Question

试图弄清楚IE和Firefox（以及任何其他浏览器）如何以不同方式处理div的css。我设置了三个简单的div，它们在IE（7）中显示正常，但在FireFox（3.0.8）中不显示“right”。并不复杂，只需要一个左侧面板，标题和某个主要内容。出于某种原因，在FireFox中，标题仅显示400px w而不是650px。有人能指出我正确的方向来处理这个问题吗？

有一个客户端模型我已经设置了这种方式，然后意识到FF搞砸了。可以发布URL，如果有助于看到我正在尝试做什么？

#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

尝试

float:right;

<＃>在#maincontent

上

UPDATE -

Answer 2

将float:left添加到标题和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对我不起作用。 http://jsbin.com/ocare3/

尝试了一个新的大头钉 - 为右手内容添加了一个包装器（#header和#mainContent）并浮动了它。你身体的尽头也没有开场白......太奇怪了。无论如何 - 这适用于我的所有浏览器。您可能希望重新设置用于确保所有内容重新排列的高度值