Page does not scroll

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):

body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	font-size: 12px;
}
body {
	background-color: #FFF;
	height: 100px;
	width: 100%;
}
</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:

* {
	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: Home | Texas Rock Climbing

How do I get the website to realize that the grey and orange divs are stretching beyond the limits of the visible area?

SOLVED

  1. Gave container div (#main) a height

  2. had to clear the floats

<div id="main">
  <div id="mainright"></div>
  <div id="mainleft">SCROLL TEST</div>
  <div style="clear:both;"></div>
</div>
  1. remove “fixed” position of #page

Hi,

You can’t really give a height to those columns as that won’t allow your content to grow. If you want equal columns then the easiest way is to use a background image with a faux column technique.

Your page is lacking a little in semantics and there is no need for the javascript link on the banner as you can simply use an anchor.

The nav should be a list and spaced with margins instead of non breaking spaces although I guess you may have been going to change that anyway.

If you need the 100% height effect then it gets a little more complicated but it can be done. This is how I would go about it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {/* for demo only - use a proper small reset sheet */
    margin: 0px;
    padding: 0px;
}
html, body {
    margin:0;
    padding:0;
    height:100%;
}
body {
    background:#fff url(http://test.texasrockclimbing.org/Images/mhflank.jpg) repeat-x 0 0;
    color:#000;
    font-family: Verdana, Geneva, sans-serif;
}
#outer {
    width:1000px;
    margin:-20px auto 0;
    min-height:100%;
    position:relative;
    z-index:1;
    border:2px solid #000;
    border-top:none;
    background:#eee url(http://www.pmob.co.uk/temp/images/bghatch3.png) repeat-y 500px 0;
    clear:both;
}
* html #outer {height:100%;}
#outer:after {/*for ie8 100% high fix*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
body:before {/*for opera 100% high fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

.logo {
    padding:20px 2px 0;
    height: 131px;
    margin:0 -2px;
    background:url(http://test.texasrockclimbing.org/Images/mhflank.jpg) repeat-x 0 20px;
    position:relative;
}
.logo a, .logo span {
    display:block;
    height:131px;
    width:100%;
}
.logo span {
    position:absolute;
    left:0;
    top:0;
    background:url(http://test.texasrockclimbing.org/Images/Masthead_SuperDroughtOutline.png) no-repeat 50% 20px;
}
#topnav {
    margin:0 -2px;
    height:32px;
    padding:0;
    list-style:none;
    overflow:hidden;
    background:#fff;
    padding:0 5px;
    position:relative;
}
#topnav li {
    float:left;
    margin:0 50px 0 0;
    padding:5px 0 0;
    text-transform:uppercase;
}
#topnav li a, #topnav li a:visited {
    color:#000;
    text-decoration:none
}
#topnav a:hover {color:#c00;}
#main {
    position:relative;
    overflow:hidden;
    border-top:1px solid #000;
    clear:both;
    width:100%;
    font-family: "Arial Black", Gadget, sans-serif;
}
#mainright,#mainleft {
    width: 500px;
    float: right;
    position:relative;
    z-index:2;
    font-size: 18px;
    font-weight: bold;
    color: #CE471E;
    text-align: center;
}
#mainleft {float:left;color:#CE471E}
</style>
</head>
<body>
<div id="outer">
    <h1 class="logo"><a href="#">Texas Rock Climbing<span></span></a></h1>
    <ul id="topnav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Club</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Calendar</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div id="main">
            <div id="mainleft">
                <h2>Heading</h2>
            </div>
            <div id="mainright">
                <p>Some text</p>
            </div>
    </div>
</div>
</body>
</html>



If you run that while online you will see the effect as I have linked to an image of mine just to make the right equal column. Just make your own image of appropriate width and style (500px x 10px).

T.T You have no idea how thankful I am right now.
“Lacking in semantics” - haha, that comment couldn’t be more appropriate. What you saw was the product of 4 days of self-teaching CSS with random YouTube videos and a few websites (my html bg is also close to nil). Not too bad for a biology major, right? lol. I probably put everything together the hard (and inefficient) way. smh.

Again, I really appreciate what you did for me. Learning as I go.

Thank you so much,

-Alek