Why is there no scroll bar?

Discussion in 'Web Design' started by Tony Jenkin, Jun 12, 2012.

to remove all ads.
  1. Tony Jenkin

    Tony Jenkin New Member

    Messages:
    4
    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: Jun 12, 2012
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    9 times out of 10, css is no good without the html...
     
  3. Tony Jenkin

    Tony Jenkin New Member

    Messages:
    4
    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: Jun 12, 2012
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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;
    
    :)
     
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    And to explain why:

    Position: fixed (or absolute) takes the element it is applied to OUT of the normal flow so it is not affected by nor can it affect other elements that are in the normal flow.
     
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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;
    }
    
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    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.
     
  8. Tony Jenkin

    Tony Jenkin New Member

    Messages:
    4
    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?
     
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    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.
     

Share This Page