CSS浮動列延伸到頁腳

我有一個問題，我的CSS，2列布局中的右側列擴展到頁腳之外。CSS浮動列延伸到頁腳

我曾嘗試與clear: both;物業打，但我無法得到它的工作.. alt text http://www.blazeware.net/examples/cssFloat/cssProblem.PNG

第二列的ID爲column2兩列使用類column。頁腳html的編號爲footerWrapper

列和頁腳都是div標籤。

我的CSS（有刪節）：

.column { 
    width: 49%; 
} 

#column2 { 
    width: 50%; 
    position: absolute; 
    top: 0px; 
    margin-left: 50%; 
    float: left; 
} 

#footerWrapper { 
    background-color: #333333; 
    border-top: 2px #FF6600 solid; 
    color: #666; 
}

HTML刪節：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div id="mainColumns"> 
     <div id="mainContainer"><div class="mainWrapper"> 
     <h1>Title</h2> 
    </div> 
    <!-- start panels --> 
    <div class="panels"> 
     <div class="column"> 
     <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     </div> 
     <div class="column" id="column2"> 
     <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     </div> 
    </div> 
    <!-- end panels --> 
    <div class="mainWrapper"></p> 
     </div></div> 
     <div id="sideBar"> </div> 
    </div> 
    <div id="footerWrapper"> 
     <div id="footer"> 
     <h6></h6> 
     </div> 
    </div> 
    </body> 
</html>

來源

2010-04-22 Darbio

我們還需要看一些HTML。 – zneak 2010-04-22 01:08:32

http://css.find-info.ru/css/011/ch05lev1sec4.html – 2010-10-20 02:19:42