div重疊/錯位

Question

我在my page上有一個頁腳，其中的內容正確放置在div＃main（其中包括div＃left和div＃right），但背景（大藍色的東西）放置DIV＃主。

我試過顯示：塊和z索引的div，無濟於事。

任何人有任何想法是怎麼回事？

代碼：

body { 
    background:url(aaa-bg.jpg) repeat-x #e7e9e9; 
    margin:0; 
    padding:0; 
    color:#383838; 
    font:12pt verdana; 
} 

img { 
    border:0; 
} 

a:link { 
    color:#e29511; 
    text-decoration:none; 
} 

a:hover { 
    color:#e29511; 
    text-decoration:underline; 
} 

a:visited { 
    color:#808080; 
} 


/* header ------------------------------------------------------------------------------ */ 

#header { 
    margin:10px auto 10px; 
    width:800px; 
    height:97px; 
} 

/* nav ------------------------------------------------------------------------------ */ 

#nav { 
    width:800px; 
    margin:0px auto 3px; 
    height:30px; 
} 

#nav ul { 
    margin:0 0px 0px 0; 
    padding:0; 
    list-style:none; 
} 

#nav ul li { 
    width:140px; 
    height:20px; 
    padding:5px 0 5px 0; 
    float:left; 
    margin:0 10px 0 0; 
    background:#cdcdcd; 
    color:#000000; 
    position:relative; 
    z-index:99999; 
    text-align:center; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    border-top:3px solid transparent; 
    border-left:3px solid transparent; 
    border-right:3px solid transparent; 
} 

#nav ul li:hover { 
    cursor:pointer; 
    border-top:3px solid #e29511; 
    border-left:3px solid #e29511; 
    border-right:3px solid #e29511; 
} 

#nav ul li.home { 
    width:140px; 
    height:20px; 
    padding:5px 0 5px 0; 
    float:left; 
    margin:0 10px 0 0; 
    background:#cdcdcd; 
    color:#000000; 
    position:relative; 
    z-index:99999; 
    text-align:center; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    border-top:3px solid transparent; 
    border-left:3px solid transparent; 
    border-right:3px solid transparent; 
} 

#nav ul li.home:hover { 
    cursor:pointer; 
    -moz-box-shadow: 5px 5px 2px #656565; 
    -webkit-box-shadow: 5px 5px 2px #656565; 
    box-shadow: 5px 5px 2px #656565; 
} 


#nav ul li ul { 
    width:140px; 
    margin:5px 0 0 -3px; 
    float:left; 
    -moz-box-shadow: 5px 5px 2px #656565; 
    -webkit-box-shadow: 5px 5px 2px #656565; 
    box-shadow: 5px 5px 2px #656565; 
    background:url(aaa-navbg3.png) repeat-x #ffffff; 
    border-bottom:3px solid #e29511; 
    border-left:3px solid #e29511; 
    border-right:3px solid #e29511; 
} 

#nav ul li ul li { 
    width:140px; 
    font-weight:normal; 
    font-size:10pt; 
    background:none; 
    border-top:1px solid #808080; 
    border-left:none; 
    border-right:none; 
    border-top-left-radius:0px; 
    border-top-right-radius:0px; 
} 

#nav ul li ul li:hover { 
    background:url(aaa-libg2.png) repeat-x; 
    border-top:1px solid #808080; 
    border-left:none; 
    border-right:none; 
} 


/* toppane ------------------------------------------------------------------------------ */ 

#toppane { 
    width:100%; 
    height:210px; 
    background:url(aaa-toppane3.jpg) repeat-x; 
    padding:20px 0 20px; 
    margin:0px 0 20px 0; 
    position:relative; 
    z-index:-1; 
    border-top:1px solid #000000; 
    border-bottom:1px solid #000000; 
} 

#toppane-inner { 
    width:800px; 
    height:210px; 
    margin:0px auto; 
} 

/* slideshow ------------------------------------------------------------------------------ */ 

#window { 
    clear:both; 
    width:800px; 
    height:210px; 
    overflow:hidden; 
    position:relative; 
    margin:0; 
    padding:0; 
} 

#slideshow { 
    width:1600px; 
    height:420px; 
    overflow:hidden; 
    position:relative; 
    margin:0; 
    padding:0; 
} 

#slideshow li { 
    width:800px; 
    height:210px; 
    float:left; 
    display:inline; 
    margin:0; 
    padding:0; 
} 

/* main ------------------------------------------------------------------------------ */ 

#main { 
    width:800px; 
    margin:5px auto; 
    padding:0px; 
} 

#left { 
    width:390px; 
    margin:0 20px 0 0; 
    padding:0px; 
    float:left; 
} 

#right { 
    width:390px; 
    font-size:11pt; 
    margin:0; 
    padding:0px; 
    float:right; 
} 

#right img { 
    margin:0 0 5px 0; 
} 

#right a:link { 
    text-decoration:none; 
    color:#383838; 
} 

#right a:hover { 
    text-decoration:none; 
    color:#383838; 
} 

#right a:visited { 
    text-decoration:none; 
    color:#383838; 
} 

h2 { 
    width:390px; 
    font:14pt verdana; 
    border-bottom:1px solid #383838; 
    margin:0 0 5px 0; 
    text-align:right; 
} 

.segment { 
    margin:0 0 40px 0; 
} 

#footer { 
    background:blue; 
    width:800px; 
    margin:30px auto; 
    color:#ffffff; 
} 

#footer table { 
    width:800px; 
} 

#footer tr { 
    width:800px; 
} 

#footer td { 
    width:200px; 
} 

Answer 1

添加clear:left;到您的頁腳解決了這個問題。

你看到的問題是，#left和#right兩個#main DIV的外部延伸，因爲他們是浮沒什麼#main DIV中被清除的浮動。

頁腳然後垂直堆疊#main div，與#left和#right的高度不一樣。

你可以做的一件事情就是在浮動物品上拉下主體div，在結尾處添加一些東西以清除浮動物。你可以用CSS來做到這一點，如下所示：

#main:after{ 
    content:"."; 
    display:block; 
    clear:both; 
    visibility:hidden; 
} 

Answer 2

你需要使用什麼是所謂的「清除修復」。事情是重疊的，因爲瀏覽器不知道何時停止「浮動」的事情，可以這麼說。

您可以：

一）添加你的主要的div後以下

<div style="clear: both;">&nbsp;</div> 

二）clear: both風格添加到您的頁腳本身。