(HTML+CSS)使用div和float的页面布局

Question

http://imageshack.us/photo/my-images/171/screenshot01p.png/

你好，我目前正在做一个网页布局，它是使用<div>和"float"属性完成的。

如上图所示，我的页面布局使用<div>分为3个部分：
<div id="header">，用红框标记
<div id="content">，用绿色方框标记
<div id="footer">，用黄色方框标记

然后我将内容进一步分为两部分(左和右(：

<div id="left">
<div id="right">

左边的div将包含元素"a"(位于左上角(和"b"(位于右下角(，而右边的div将只包含"c"。

这是我实现它的代码：

<div id="header"></div>
<div id="content">
    <div id="left">
        <div id="topleft">a</div>
        <div id="bottomleft">b</div>
    </div>
    <div id="right">c</div>
</div>
<div id="footer"></div>

这是CSS

#header {
border: 5px solid red;
}
#content {
    border: 5px solid greenyellow;
    width: 1024px;    
    height: auto;   
}
#footer {
    border: 5px solid yellow;
}
#left {
    float: left;
    width: 480 px;
    border: 1px solid black;        
}
#topleft {
    border: 1px solid black;  
}
#bottomleft {
    border: 1px solid black;  
}
#right {
    float: left;
    width: 480 px;
    border: 1px solid black;        
}

我在#content中使用了height:auto，因为我希望内容部分在包含b和c之后展开，但看起来它不包含任何元素。相反，a、b和c中的内容与页脚重叠。

我确实尝试过在CSS中使用"clear:bboth"作为页脚——这似乎解决了重叠的问题，但内容仍然没有扩展！(高度=0(

有什么办法解决这个问题吗？

谢谢。

Answer 1

添加overflow:auto

#content {
    border: 5px solid greenyellow;
    width: 1024px;    
    height: auto;  overflow:auto 
}

DEMO

Answer 2

好吧，您编写的代码似乎在IE上运行良好。