Forum Moderators: not2easy
this is my code, i cant seem to get the #content div to scroll, I have read about box model, semi understanding it, and i have tried allsorts of things now, i am sure its simple but its driving me crazy.
Please help
TIA
<?xml version="1.0" encoding="iso-8859-1"?>
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body, html {
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#header {
height: 155px;
width: 760px;
display: block;
}
#container {
margin-left: -380px;
width: 760px;
left: 50%;
position: absolute;
background-color: #336699;
height: 100%;
}
#links {
text-align: center;
width: 760px;
background-color: #336699;
height: 20px;
margin: 0px;
padding: 1px 0px;
border: 1px solid #FFFFFF;
position: relative;
top: 0px;
display: block;
}
#links li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#links a {
background-color: #FFFFFF;
border: 1px solid #666666;
font-size: 12px;
text-decoration: none;
color: #336699;
height: 20px;
width: 100px;
vertical-align: middle;
}
#links ul {
margin: 0px;
padding: 0px;
}
#links a:hover {
background-color: #CCCCCC;
}
#col1 {
background-color: #FFFFFF;
height: 100%;
width: 150px;
padding: 5px;
font-size: 12px;
border: 1px solid #333333;
margin: 2px;
position: relative;
left: 0px;
top: 0px;
display: block;
float: left;
}
#content {
background-color: #FFFFFF;
height: 100%;
width: 100%;
overflow: scroll;
padding: 5px;
margin: 2px;
border: 1px solid #333333;
font-size: 12px;
display: block;
}
-->
</style>
</head>
<body>
<div id="container">
<!-- container starts -->
<div id="header"><h1>header</h1></div>
<div id="links">
<ul>
<li><a href="#" target="_self">link</a></li>
<li><a href="#" target="_self">link</a></li>
<li><a href="#" target="_self">link</a></li>
<li><a href="#" target="_self">link</a></li>
<li><a href="#" target="_self">link</a></li>
<li><a href="#" target="_self">link</a></li>
</ul>
</div>
<div id="col1"><h1>col1</h1></div>
<div id="content"><h1>content</h1></div>
<!-- container end -->
</div>
</body>
</html>
Try hiding it from IE:
#content {
background-color: #FFFFFF;
height: 100%;
width: 100%;
overflow: scroll;
padding: 5px;
margin: 2px;
border: 1px solid #333333;
font-size: 12px;
display: block;
}
* html #content {
width: 100%; /*** IE5.5 needs this value to eliminate a horizontal scrollbar ***/
width: auto; } /*** resets the value for IE6 and IE5-Mac ***/
I'm not an expert on this - but give it a try.
#content {
background-color: #FFFFFF;
height: 100%;
width: auto;
overflow: scroll;
padding: 5px;
margin: 2px;
border: 1px solid #333333;
font-size: 12px;
display: block;
}
It will scroll just there seems to be a portion missing like the content div thinks it has 120% room not 100%
