HTML CSS包裝DIV不工作

我有以下的網頁佈局。什麼IM不理解的是，爲什麼內容的div被顯示在右側其父包裝DIV之外..HTML CSS包裝DIV不工作

代碼如下並感謝您的幫助..

@charset "utf-8"; /* CSS Document */ 

* {  margin: 0; padding: 0; } 

html, body { height: 100%; } 

body { padding-top: 10px; background: url(../images/background.jpg) no-repeat center top;; } 

div#wrapper { margin: auto; height: auto; width: 978px; min-width: 978px; min-height: 100%; margin: 0 auto -4em; } 

div#header { height: 196px; } 

#navigation { list-style: none; margin: 0;  padding: 0; height: 69px; } 

#navigation li { float: right; } 

#navigation li a { display: block; width: 140px; text-align: center; color: red; font-size: 120%; height: 69px; } 

#navigation li a:hover { background:url(../images/menu_red_bg.jpg); 
    color: yellow; } 

div#content { width: 978px; background-color:#39F; margin-top: 80px; 
    overflow:auto; padding-bottom: 150px; padding-left: 50px;  padding-right: 50px; } 

div#footer { position: relative;  margin-top: -150px; /* negative value of footer height */ height: 150px; clear: both; padding: 5px; } 

.leftCol { float: left; } 

.rightCol {  float: right; }

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" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> 

    <div id="header">Header</div> <div id="menu"> 
    <ul id="navigation"> 
     <li><a href="">Contact Us</a></li> 
     <li><a href="">Recommends</a></li> 
     <li><a href="">Todays Travel Deals</a></li> 
     <li><a href="">Home</a></li> 
    </ul> </div> 

    <div id="content"> 
    <div class="leftCol"> 
     <h2>Who we are...</h2> 
     <P> 
     Enim ad minim veniam, quis nostrud exerci tation 
     ullamcorper suscipit nisl ut aliquip ex ea commodo 
     consequat. Duis autem vel eum iriure dolor in in 
     vulputate velit esse molestie consequat. 
     Nam liber tempor cum soluta nobis eleifend option 
     congue nihil imperdiet doming id quod mazim 
     placerat facer possim assum. Lorem ipsum dolor sit 
     amet, consectetuer adipiscing elit. 
     </P> 
    </div> 
    <div class="rightCol"> 
     <h2>Who we are...</h2> 
     <P> 
     Enim ad minim veniam, quis nostrud exerci tation 
     ullamcorper suscipit nisl ut aliquip ex ea commodo 
     consequat. Duis autem vel eum iriure dolor in in 
     vulputate velit esse molestie consequat. 
     Nam liber tempor cum soluta nobis eleifend option 
     congue nihil imperdiet doming id quod mazim 
     placerat facer possim assum. Lorem ipsum dolor sit 
     amet, consectetuer adipiscing elit. 
     </P> 
    </div> 
    <center><img src="images/dealoftheday.jpg" width="800" height="285" alt="Deal of the Day" /></center> </div> </div> <div id="footer"> <hr /> <img src="images/abta_logo.gif" width="171" height="74" alt="ABTA Logo" /> 
    <img src="images/worldchoice.gif" width="254" height="83" alt="World Choice Logo" /> </div> </body> </html>

來源

2010-07-25 Lee

放在一個更div兩個浮動元素後的wrapper（.leftCol, .rightCol），並將其設置爲clear: both;。

來源

2010-07-25 22:45:53 cypher

您好，這didnt影響它：秒。我認爲問題在於對內容的div填充..重疊似乎總結到離左+右填充.. 我的假設下填充不會改變元素的尺寸。 – Lee 2010-07-25 22:50:28

好吧，然後從驗證您的代碼開始。例如，在XHTML 1.0中，沒有中心元素。 – cypher 2010-07-25 23:03:19

HTML CSS包裝DIV不工作

回答

相關問題