HTML Div標籤與CSS重疊

我創建了一個基本的div元素和基本的CSS樣式的網頁。不過，我發現，只要我在這些div標籤中的一箇中放置過量的內容，使用overflow: auto;技術就會錯誤地顯示內容。HTML Div標籤與CSS重疊

LINK視覺問題：http://i.stack.imgur.com/FGCQk.jpg

的HTML：

<!doctype html> 
<html lang="eng"> 
<head> 
<title> Car Hunt Jamaica || The Hunt Is On! </title> 
<meta name="title" content="Car Hunt Jamaica"> 
<meta name="description" content="Buy and Sell New and User Motor Cars In Jamaica"> 
<meta name="keywords" content="Cars, Buses, Trucks, Buy, Vehicles"> 

<link href="styling/desktop.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div id="main_body"> 

<div id="header_left"> 
<p> header left</p> 
</div> <!-- header left ends here --> 

<div id="header_right"> 
<p> header right </p> 
</div> <!-- header right ends here --> 

<div id="right_sidebar"> 
<p> right side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side bar </p> 
</div> <!-- Right sidebar ends here --> 

<div id="container"> 
<p> container </p> 
</div> <!-- container ends here --> 


</div> <!-- Main Body Ends --> 
<div id="footer"> 
<p> Footer </p> 
</div> <!-- Footer ends here --> 

</body> 
</html> <!-- HTML page ends here -->

的CSS：

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

body{ 
    background-color:#000; 
    overflow-y: auto; 
} 

#main_body{ 
    background-color:#fff; 
    width: 990px; 
    margin-top: 50px; 
    margin-left:auto; 
    margin-right:auto; 
    height: 600px; 
} 

#header_left{ 
    background-color:#F00; 
    width: 230px; 
    height: 70px; 
    float: left; 
} 

#header_right{ 
    background-color:#009; 
    width: 760px; 
    height: 70px; 
    float:right; 
} 

#footer{ 
    background-color:#666; 
    width: 990px; 
    height: 30px; 
    margin-top:0px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#right_sidebar{ 
    margin-top: 30px; 
    margin-left: 20px; 
    background-color:#FF0; 
    float: left; 
    width: 230px; 

} 

#container{ 
    background-color:#0C0; 
    width: 660px; 
    float: right; 
    margin-top: 30px; 
    overflow-y: auto; 
    margin-right: 20px;

不介意可怕的顏色的，這樣我就可以正確識別每個div標籤

來源

2012-12-14 Darien Ruddock