DIV位置無序和繼承寬度出於某種原因

Question

所以我做一個基本的網頁，瞭解HTML & CSS，是一個assingment我做學校的一部分。

基本上我的問題是這樣的：

我有一個以上的在我的網頁另一個DIV appering，並在相同的寬度DIV正在顯示一個頁腳股利。這是我的代碼：

<div id="header"> 
<img src="img/manchester-united-logo.png"> 
<h1>Manchester United </h1> 
</div> 

<div id="slider"> 
<ul class="bxslider"> 
<li><img src="img/striker.jpg" title="Forwards" /></li> 
<li><img src="img/mids.jpg" title="Midfielders" /></li> 
<li><img src="img/defenders.jpg" title="Defenders" /></li>  
</ul> 
</div> 

<div id="windows"> 
<table id="boxTable"> 
<tr> 
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td> 
<td class="spacer"></td> 
<td class="box"><img src="img/history.jpg" title="History"></td> 
<td class="spacer"></td> 
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td> 
<td class="spacer"></td> 
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td> 
</tr> 

<tr> 
<td class="box"><div class="button"><p><p><a href="URL.htm">The Manager</p></div></td> 
<td class="spacer"></td> 
<td class="box"><div class="button"><p><a href="URL.htm">History</a></p></div></td> 
<td class="spacer"></td> 
<td class="box"><div class="button"><p><a href="URL.htm">Fixtures & Results</a></p></div></td> 
<td class="spacer"></td> 
<td class="box"><div class="button"><p><a href="URL.htm">Old Trafford</a></p></div></td> 
</tr> 
</div> 

<div id="footer"> 
THE FOOTER WHICH IS ANNOYING!! 
</div> 

</body> 

& CSS

* { 
margin: 0; 
padding: 0; 
} 
body{ 
background-color: #F4F4F4; 
width: 100%; 
height: 100%; 
min-width: 1280px; 

} 
#header{ 
height: 12%; 
width: 1000px; 
margin: 0 auto;  
} 
.button { 
clear:both; 
width: 140px; 
height: 18px; 
moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
background: #fff; 
border-radius: 3px; 
border: 1px solid #999; 
padding: 5px; 
text-align:center; 
margin: 0 auto; 
font-family: 'Roboto Slab', serif; 
} 
.button a { 
color: #222222; 
text-decoration: none; 
} 

.button:hover { 
opacity: 0.6; 
} 

#header img { 
height: 110px; 
float: left; 
} 
#header h1{ 
padding: 25px 0 0 150px; 
font-family: 'Roboto Slab', serif; 
font-size: 2.5em; 
font-weight: 300; 
} 

#slider{ 
height: 45%; 
clear:both; 
background-image:url('img/pattern.png'); 
padding-top: 30px; 
} 

#windows{ 
width: 1000px; 
margin: 0 auto; 
padding-top: 20px; 
overflow:hidden; 
} 

.box img{ 
width:220px; 
height:130px; 
cursor: pointer; 
} 

.spacer{ 
width:50px; 
} 

#footer{ 
background-image:url('img/pattern.png'); 

} 

我想我的問題有事情做與我的另一浮動DIV ..

Answer 1

您還沒有關閉了表</table> ;-)

你也錯在您的鏈接中唱一個</a>

<div id="header"> 
<img src="img/manchester-united-logo.png"> 
<h1>Manchester United </h1> 
</div> 

<div id="slider"> 
<ul class="bxslider"> 
<li><img src="img/striker.jpg" title="Forwards" /></li> 
<li><img src="img/mids.jpg" title="Midfielders" /></li> 
<li><img src="img/defenders.jpg" title="Defenders" /></li>  
</ul> 
</div> 

<div id="windows"> 
<table id="boxTable"> 
<tr> 
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td> 
<td class="spacer"></td> 
<td class="box"><img src="img/history.jpg" title="History"></td> 
<td class="spacer"></td> 
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td> 
<td class="spacer"></td> 
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td> 
</tr> 

<tr> 
<td class="box"><div class="button"><p><p><a href="URL.htm">The Manager</a><!-- missing /a here --></p></div></td> 
<td class="spacer"></td> 
<td class="box"><div class="button"><p><a href="URL.htm">History</a></p></div></td> 
<td class="spacer"></td> 
<td class="box"><div class="button"><p><a href="URL.htm">Fixtures & Results</a></p></div></td> 
<td class="spacer"></td> 
<td class="box"><div class="button"><p><a href="URL.htm">Old Trafford</a></p></div></td> 
</tr> 
</table> <!-- <----------You need to close the table here --> 
</div> 

<div id="footer"> 
THE FOOTER WHICH IS ANNOYING!! 
</div> 

</body>