...

View Full Version : No scroll bar (div off of page)



pulse1212
07-19-2011, 06: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):


</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: 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, 06:52 AM
you have to clear your floats

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-24.png

whenever you float something, it needs either :

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



#main {
height: 900px;
}


b) clear from the bottom



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


c) clearfix (clearing before)



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




<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, 06:54 AM
Ah! Trying that out as we speak!

Sammy12
07-19-2011, 06: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, 07:08 AM
Okay, so I tried only setting #main height to 900px but it didn't work so I went ahead and also implemented
<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, 07: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, 07: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum