我的側邊欄是在頁腳

我有一個練習網站設置，但邊欄繼續在頁腳下或與它混合。這裏是所有代碼（至少對於一個頁面）和稍後的css。我只需要一個快速的幫助，我知道一個公平的份額，但不多，所以請幫助。我的側邊欄是在頁腳

<!doctype html> 
<html> 
<head> 
<meta charset-"utf-8"> 
<title>Polyverse</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<!--main part--> 
<!--header--> 
<body> 
<div id="container"> 
    <div> 
     <body background="images/bg.jpg"></div> 
    <div id="header"> 
     <h1><center><img src="images/header.png" width="960" height="120"   alt=">/center></h1> 
<!--navbar--> 
     <nav id="navbar"> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="articles.html">Articles</a></li> 
       <li><a href="downloads.html">Downloads</a></li> 
       <li><a href="contact.html">Contact Us</a></li> 
      </ul> 
     </nav> 
    </div> 
<!--main content--> 
    <div id="sidebar"> 
     <p>And my sidebar stuff here.</p> 
    </div> 
    <div id="main"> 
    <h1><p>About</p></h1> 
    <article><p>All my text goes here</p></article> 
    </div> 
<!--footer--> 
    <div id="footer"> 
    <address><p align=right>Last updated the 24th of July 2013<br> Polyverse  copyright</p> 
     </address> 
    </div> 
</div> 
</body> 
</html>

和CSS：

html, 
#body { 
    width: 960px; 
    margin: 25px auto; 
    padding-left: 1em; 
    font-family: Oswald, "Times New Roman", 
     Times, sans-serif; 
    height:100%; 
    } 


#container { 
    position: relative; 
    padding-bottom: 50px; 
    min-height: 100%; 
    margin: 0 auto 0 auto; 
} 

#navbar { 
    width: 960px; 
} 

#navbar ul { 
    margin: 0; 
    padding: 5px; 
    list-style-type: none; 
    text-align: center; 
    background-color: #000; 
    } 

#navbar ul li { 
    display: inline; 
    } 

#navbar ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #000; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #fff; 
    } 

#main { 
    float: left; 
    width: 600px; 
} 

#sidebar { 
    float: right; 
    width: 200px; 
} 
    address { 
     margin-top: 1em; 
     padding-top: 1em; 
     border-top: thin dotted 
     } 

    p { 
    width: 800px; 
    margin: 25px auto; 
    } 

#footer: { 
    height: 50px; 
    width: 960px; 
    position: absolute; 
    bottom: 0; 
}

所以我只是在想，我怎麼會解決這個問題？

來源

2013-07-25 Francis Hurtubise

您的CSS和HTML都加載了語法錯誤。在嘗試排除其他任何問題之前先解決這些問題。 –

那麼，除了一個事實，即你的HTML是充滿了錯誤，我會建議做container類和頂部容器後添加。是的clear您floats

像這樣...（也清理你的HTML）... http://jsfiddle.net/feitla/TC73U/

<div class="container"> 
    <div id="footer" class="clearfix"> <address><p align="right">Last updated the 24th of July 2013<br/> Polyverse  copyright</p> 
    </address> 
    </div> 
</div>

來源

2013-07-25 18:36:20 feitla

好吧，一切正常。我在.container類中輸入了寬度，但每當我爲標題添加標記時，

中的其餘文本都會穿過我的頁腳的虛線。更多的幫助？請？ –

如果你能刪除position: absolute所有你需要做的就是明確你的頁腳脫身：

#footer { 
    clear: both; 
}

both將避免元素浮動或向左（如#main）或右（如#sidebar ）。

如果你只是想清楚#sidebar而不是#main，使用clear: right;

來源

2013-07-25 18:30:25

我建議你用固定的CSS繼續之前固定的HTML代碼中的所有錯誤。

來源

2013-07-25 18:40:49 Austen

我的側邊欄是在頁腳

回答

相關問題