背景不會覆蓋內容

我想要有頁面的白色背景封面內容，但由於某些原因，它只能在導航菜單/＃main_content_top處結束。我怎樣才能解決這個問題？
HTML外觀/圖片： http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
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> 
    <title>Untitled Page</title> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     #Text1 
     { 
      width: 77px; 
     } 
     #Text2 
     { 
      width: 78px; 
     } 
    body { 
} 
    </style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 

<div id="container"> 

<div id="header"><h1> 
    <img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div> 

<div id="sub_header">Facility Booking Registration</div> 

<div id="main_content_top"><a href ="Home.htm">Home</a> | <a href = "BookFacility.htm">Book a Facility</a> | <a href ="FindBooking.htm" >Find/Delete a 
    booking</a></div> 

<div id="main_content"> 

<div class="content"> 

<p class="title">Public Service Announcements</p> 
<h2>Vesak Day</h2> 
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will 
    be closed and no bookings will be allowed on this day.</p> 
<h2>Labour Day</h2> 
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will 
    be closed and no bookings will be allowed on this day.</p> 
</div> 

<div class="menu"> 
<div class="menu_title">Login</div> 
<div>Username: 
    <input id="Text1" type="text" /> 
    <br /> 
    Password: 
    <input id="Text2" type="text" /> 
    <br /> 
    <br /> 
    <input id="Button1" type="button" value="Sign In" /> 
       </div> 

</div> 

</div> 

<div id="clear"></div> 

</div> 

</body>

CSS樣式表：

body { 
    background: #CACACA url(images/background.png) repeat-x; 
    font-family: "Trebuchet MS", Verdana, serif, Arial 
} 
#container { 
    margin: 0 auto; 
    width: 750px 
} 
#header { 
    width: 100%; 
    height: 33px; 
} 
#sub_header { 
    text-align: right; 
    font-weight: bold; 
    font-size: 20px; 
    color: #FFFFFF; 
    padding-right: 20px; 
    padding-bottom: 20px; 
} 
#main_content { 
    margin: 0 auto; 
    width: 100%; 
    background: #FFFFFF url('images/background_content.gif'); 
    background-repeat: repeat-y; 
} 
#main_content_top { 
    height: 30px; 
    background: #FFFFFF url('images/background_top.gif'); 

} 
#main_content_bottom { 
    height: 30px; 
    background: #FFFFFF url('images/background_bottom.gif'); 
} 
.content { 
    float: left; 
    width: 510px; 
    text-align: justify; 
    padding: 0 30px 0 30px; 
    font-size: 14px 
} 
.menu { 
    width: 139px; 
    float: right; 
    padding: 0 20px 0 20px; 
    border-left: #8C8484 1px solid; 
    font-size: 12px 
} 
.menu ul { 
    margin: 0; 
    padding: 10px 0 10px 15px 
} 
.menu il { 
    list-style-type: disc 
} 
#header h1 { 
    margin-bottom: 0px; 
    font-size: 28px; 
    font-weight: bold; 
    color: #A40008 
} 
.content h2 { 
    margin-top: 0px; 
    font-size: 20px; 
    font-weight: bold; 
    color: #A40008 
} 
.menu_title { 
    font-size: 18px; 
    font-weight: bold 
} 
#clear { 
    display: block; 
    clear: both; 
    width: 100%; 
    height:1px; 
    overflow:hidden; 
} 
a { 
    color: #A40008; 
    font-weight: bold; 
    text-decoration: none 
} 
a:hover { 
    color: #A40008; 
    font-weight: bold; 
    text-decoration: underline 
} 
.title { 
    margin: 20px; 
    text-align: center; 
    font-weight: bold; 
    font-style: italic; 
    height: 18px; 
} 
.highlight 
{ 
    font-weight:bold 
} 
.update 
{ 
    font-weight:bold; 
    color:Green 
} 

.confirm 
{ 
    font-weight:bold; 
    color:Red 
} 

table 
{ 
    border-style : dashed 
}

來源

2012-01-11 ArcNine

您提供的IMG是太微小，可以理解你指的是什麼 – kinakuta 2012-01-11 03:32:35