I have two divs stretching beyond the bottom of my visible screen but the scroll bar won't appear and I tried playing around with various "overflow" possibilities but couldn't figure it out.
Source Code (simplified a smidgen for ease of reading purposes):
Code:
</style>
<link href="css/layout2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="masthead" onclick="location.href='index2.html';" style="cursor:pointer;"></div>
<div id="navspace">
<div id="topnav">HOME | CLUB | TEAM | CALENDAR | CONTACT</div>
</div>
<div id="main">
<div id="mainright">SCROLL TEST</div>
<div id="mainleft">SCROLL TEST</div>
</div>
</div>
</body>
</html>
CSS
Code:
* {
margin: 0px;
padding: 0px;
}
#masthead {
height: 130px;
margin-right: auto;
margin-left: auto;
background-color: #CB6528;
margin-top: 0px;
background-image: url(../Images/Masthead_SuperDroughtOutline.png);
background-repeat: no-repeat;
background-position: top;
width: 1000px;
}
#page {
background-color: #CF0;
background-image: url(../Images/mhflank.jpg);
background-repeat: repeat-x;
height: 131px;
width: 100%;
margin-right: auto;
margin-left: auto;
position: fixed;
background-position: center;
visibility: visible;
}
#page #navspace {
height: 12px;
padding-top: 5px;
padding-bottom: 12px;
margin-right: auto;
margin-left: auto;
width: 1000px;
}
#page #topnav {
padding-top: 3px;
padding-bottom: 3px;
}
#main {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#main #mainright {
background-color: #E48631;
height: 700px;
width: 500px;
float: right;
}
#main #mainleft {
background-color: #EEE;
height: 700px;
width: 500px;
float: left;
}
Link to website:
http://test.texasrockclimbing.org
How do I get the website to recognize that the grey and orange divs are stretching beyond the limits of the visible area?