Why is there no scroll bar?

T

Tony Jenkin

New Member
Hi, I wonder if someone could look at my divs and tell me why there is no scroll bar showing up. I have divs going past the height of the window but there is no scroll bar to scroll down to see everything, I also have the min-height set to 1500px. And I don't have any overflow set to hidden. Thanks

Code: 
#main_canvass {
	background-color: #CCC;
	height: auto;
	left: 0px;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0px;
	width: 100%;
}
#main_container {
	height: auto;
	width: 800px;
	background-color: #FFF;
	top: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	position:relative;
	min-height: 1500px;
}
#shadow {
	background-color: #CCC;
	background-image: url(../images/dropShadow.png);
	background-repeat: repeat-y;
	width: 840px;
	left: 20px;
	margin: 0 auto;
}
#nav_bar {
	width: 785px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-left: 15px;
}
#news_flash {
	height: 300px;
	width: 720px;
	margin-left: 40px;
	margin-top: 8px;
}
#copyright {
	width: 400px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
	padding-left: 150px;
	float: left;
	margin-left: 125px;
	margin-top: 20px;
}
#news {
	background-color: #FFF;
	width: 360px;
	border: 1px solid #A6CE38;
	float: left;
	margin-left: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 8px;
}
#upcoming_events {
	background-color: #FFF;
	width: 180px;
	border: 1px solid #A6CE38;
	float: left;
	margin-left: 32px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 8px;
}

#gallery {
	background-color: #FFF;
	width: 150px;
	border: 1px solid #A6CE38;
	float: left;
	margin-top: 8px;
	margin-left: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	
}
 
Last edited by a moderator:
T

Tony Jenkin

New Member
Sorry about that... here is the html.
HTML: 
<html>
<body>

<!-- start main canvas div-->
<div id="main_canvass">

  <!--start drop shadow div-->  
  <div id="shadow">
    
	<!--start main body div-->
    	<div id="main_container">

      	<!--start nav bar div-->
      	<div id="nav_bar">
      	<!--start nav bar-->
            <!--end nav bar-->
      	</div>
      	<!--end nav bar div-->
      
            <!--start news flash div-->
      	<div id="news_flash">
       	<!--start news flash-->
        	<!--end news flash-->
      	</div>
      	<!--end news flash div-->
      
      	<!--Start upcoming events div-->
      	<div id="upcoming_events">
      	</div>
      	<!--End upcoming events div-->
       
    		<!--Start news div-->
    		<div class="main" id="news">    
		</div>
		<!--End news div-->
    
    		<!--Start gallery div-->
    		<div class="title" id="gallery">
		</div>
    		<!--End gallery div-->
   
      	<!--start copyright div-->
      	<div class="copyright" id="copyright">
      	</div>
	  	<!--end copyright div-->
      
    </div>
    <!--end main body div-->

  </div>
  <!--end drop shadow div-->

</div>
<!-- end main canvas div!-->

</body>
</html>
and here is the css again

Code: 
#main_canvass {
	background-color: #CCC;
	height: auto;
	left: 0px;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0px;
	width: 100%;
}
#main_container {
	height: auto;
	width: 800px;
	background-color: #FFF;
	top: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	position:relative;
	min-height: 1500px;
}
#shadow {
	background-color: #CCC;
	background-image: url(../images/dropShadow.png);
	background-repeat: repeat-y;
	width: 840px;
	left: 20px;
	margin: 0 auto;
}
#nav_bar {
	width: 785px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-left: 15px;
}
#news_flash {
	height: 300px;
	width: 720px;
	margin-left: 40px;
	margin-top: 8px;
}
#copyright {
	width: 400px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
	padding-left: 150px;
	float: left;
	margin-left: 125px;
	margin-top: 20px;
}
#news {
	background-color: #FFF;
	width: 360px;
	border: 1px solid #A6CE38;
	float: left;
	margin-left: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 8px;
}
#upcoming_events {
	background-color: #FFF;
	width: 180px;
	border: 1px solid #A6CE38;
	float: left;
	margin-left: 32px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 8px;
}

#gallery {
	background-color: #FFF;
	width: 150px;
	border: 1px solid #A6CE38;
	float: left;
	margin-top: 8px;
	margin-left: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	
}
 
Last edited by a moderator:
Phreaddee

Phreaddee

Super Moderator
Staff member
remove the position:fixed on #main_canvass

to compensate for the shift on the page (browser defaults) add
Code: 
body {margin:0;padding:0;}
to your css
and then ironically you'll need to add
Code: 
overflow:hidden;
to #main_container

then it'll work.

also you can trim a stack in your css by combining the rules

for instance
Code: 
border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;

can become
Code: 
border-top:1px solid #000;
and
Code: 
padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
can become
Code: 
padding: 8px 0px 8px 8px;

:)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
As Phreaddee mentioned { overflow:hidden; } is a method of float clearing. You may also want to look into the pseudo after class E:after { }. CSS allows you to programmatically create an element before and after an existing element in the DOM.

Code: 
E:after {
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
 
chrishirst

chrishirst

Well-Known Member
Staff member
{ overflow:hidden; } is a method of float clearing.
Click to expand...

Not strictly true, yes it can be used as a method of clearing floats but that is NOT it's primary purpose, and it is misleading to term it as such.

The CSS overflow property is there to determine whether the content of a block level container should be clipped (hidden) or shown (visible) when it overflows the element content box width or height.

The "float clearing" behaviour is more of a "fortunate accident" rather than being part of the specification.
 
T

Tony Jenkin

New Member
Thanks so much! That worked like a charm.

Maybe you could help me with another thing. I was wondering if there is an easy way to have the #copyright div stay at the foot of the website?
 
chrishirst

chrishirst

Well-Known Member
Staff member
You could play about with stick footers

Or just let it follow the content in the natural flow. HTML documents are not printed fixed lenght/height pages in a book, they are a variable length, so the "footer" following the content is perfectly normal.
 
You must log in or register to reply here.
Top