No scroll bar (div off of page)

pulse1212 · 07-19-2011, 05:49 AM

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?

Sammy12 · 07-19-2011, 05:52 AM

you have to clear your floats

whenever you float something, it needs either :

a) needs a height for the parent div (#main)

Code:

#main {
 height: 900px;
}

b) clear from the bottom

Code:

<div id="main">
 <div class="left"></div>
 <div class="right"></div>
 <div style="clear:both;"></div>
</div>

c) clearfix (clearing before)

Code:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Code:

<div id="main" class="clearfix">
 <div class="left"></div>
 <div class="right"></div>
</div>

now that you have a height set, you can use overflow: auto; on the #main

pulse1212 · 07-19-2011, 05:54 AM

Ah! Trying that out as we speak!

Sammy12 · 07-19-2011, 05:59 AM

you can't. the best way to put two divs next to each other is using float

-----

all those options are valid. there are many ways to clear floats. option (a) is the best way, option (b) is when a height varies (possible for comments and columns that increase size because of user-inputs), option (c) is for a lazy web developer or someone who wants to be extremely cautious about clearing.

apprently clearfix is better than clearing from the bottom browser-support wise, but I have seen no difference between browsers

pulse1212 · 07-19-2011, 06:08 AM

Okay, so I tried only setting #main height to 900px but it didn't work so I went ahead and also implemented

Code:

<div style="clear:both;"></div>

but it no scroll bar appeared. I ended up trying all combinations of your suggested solution but none worked

you can refer to the life website in case your wondering if I added the code incorrectly or if I misunderstood

Sammy12 · 07-19-2011, 06:13 AM

take the fixed out from id="page". you only need one clear method. its not causing the page from not scrolling, but it is the correct way to clear floats regardless.

also take out the heights from <body> and id="page"

pulse1212 · 07-19-2011, 06:18 AM

omg >_< Lifesaver! ha! I could have swornnn I had tried that!

Thank you so much Sammy

Now time to get those two divs side by side again

EDIT: DONE! *SUPER* sigh of relief. Again, I really appreciate your help