HTML Div Tags Overlapping With CSS
Question
Im creating a webpage wit basic div elements and basic css styling. However i find that whenever I place an excessive amount of content in one of these div tags the content is displayed incorrectly event with the use of the overflow: auto; technique.
LINK TO VISUAL PROBLEM: http://i.stack.imgur.com/FGCQk.jpg
THE 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 -->
THE 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;
Dont mind the horrible colors its just so i can identify each div tag correctly
2 answers
solution1
0 2012-12-14 11:29:08
You #main_body has a height , you need to add either overflow:hidden; or overflow:scroll; to the #main_body
If you wish that the main_body stretches as right side grows then remove height and add overflow:hidden;
solution2
0 2012-12-14 11:29:24
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.