Eliminating my Scrolling

Hello,

Having one issue on this site I am working on. It is scrolling when it doesnt need too. I still want the wrapper-bg.png image to go right to the bottom which I did by using 100%.

But I believe the scroll is coming from my margin-top: 35px; that I put on the wrapper div to move it down.

Can anyone lend me a hand just to get rid of this.

Heres the link…

The Club - Thunder Bay Country Club

It should only scroll when needed to if the content is to much to show on the page.

Thanks,

Mike

You need a wrapper around all those divs except the footer, and put a negative margin on the wrapper.

Here is a detailed explanation of what’s required:

Thanks,

I took a look at it kind of understand it. Will try it out so all I have to do is put a outer div around everything except the footer and give it a height: 100% then will have to optimize for browsers, is that correct?

Make sure to study all the code relating to #outer in the example I linked to. Firstly, it gets

#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
* html #outer {
    height:100%
}

and then

#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

You will need to modify the negative top margin to match the height of your footer. Just post back if you have problems. I’ve not done a page like this before, so I may be missing something, but the whole story is on that sticky page above.

Thanks for the help but not exactly what I was looking for, thats actually for a Sticky Footer. My footer is a Fixed Footer so always stays at the bottom of the browser. All I need to know is how to get rid of the scroll and also keeping the wrapper-bg.png image on the wrapper div all the way down to the footer

Still having an issue, was trying some stuff but nothing is working, still get the scroll bar, heres the link if theres less content, I still would like the wrapper-bg image to go all the way down to touch the fixed footer but just no scroll when there is less content, only scroll when needed…

The Club - Thunder Bay Country Club

Also, I was trying with more content, but it doesnt show all the content, here’s a link below to show with more content but it just cuts it off, is this because it is 100%…

The Club - Thunder Bay Country Club

Hi,

You have to be more creative than that :slight_smile:

You can’t add margins to 100% because that makes it bigger. You can’t use 100% anyway because then it would never grow and therefore you need min-height:100% on your wrapper.

What you need to do is use a negative margin top (like the sticky footer) and then fill up the space with inner elements to rub out the background and move stuff down.

To view content under the fixed footer just make sure that there is some padding bottom on Content and that you have cleared the floats.

This is working:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Club - Thunder Bay Country Club</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
@charset "UTF-8";
/* CSS Document */

/*
Theme Name:        The Club - Thunder Bay Country Club
Description:    Wordpress theme by Modo
Version:        1.0 
Author:            Modo Communication Inc.
Author URI:        http://www.modocom.ca

*/

html, body {
    height: 100%;
    margin:0;
    padding:0;
}
img {
    border:none
}
body {
    background: url(http://modocom.ca/tbcc/images/bg.jpg) no-repeat top center fixed;
    color: #000;
    font-family: Helvetica, Arial sans-serif;
    font-size: 10px;
    line-height: 24px;
    font-style: normal;
}
a {
    color: #006c67;
    text-decoration: none;
}
h1 {
    font-weight: bold;
    font-size: 18px;
    color: #006c67;
    margin: 0;
    padding: 0;
}
p {
    line-height: 18px;
    padding-right: 20px;
}
.date {
    line-height: 14px;
    color: #999;
}
#top-bar {
    width: 100%;
    height: 65px;
    background: #000;
    margin: auto;
}
#nav {
    width: 700px;
    margin: auto;
    padding-top: 15px;
}
#navigation-l {
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}
#navigation-l li {
    float: left;
}
#navigation-l li a {
    display: block;
    padding: 3px 10px 0px 8px;
    text-decoration: none;
    color: #FFF;
}
.line {
    border-right: 1px solid #FFF;
}
#navigation-l li a:hover {
    color: #a3a60f;
}
#navigation-r {
    float: right;
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}
#navigation-r li {
    float: right;
}
#navigation-r li a {
    display: block;
    padding: 3px 10px 0px 8px;
    text-decoration: none;
    color: #FFF;
}
#navigation-r li a:hover {
    color: #a3a60f;
}
#logo {
    width: 223px;
    height: 190px;
    margin-top: -65px;
    position: absolute;
    left: 50%;
    margin-left: -111px;
}
#wrapper {
    background: url(http://modocom.ca/tbcc/images/wrapper-bg.png) repeat-y top center;
    min-height: 100%;
    margin: auto;
    width: 725px;
    margin-top: -65px;
    overflow: hidden;
}
* html #wrapper {
    height:100%;
    overflow:visible;
}
#content-bar {
    height:100px;
    background: url(http://modocom.ca/tbcc/images/bg.jpg) no-repeat top center fixed;
    border-bottom:40px solid #006c67;
}
#content {
    padding-top: 85px;
    width: 625px;
    margin: auto;
    overflow:hidden;
    padding-bottom:50px;
}
#left {
    float: left;
    width: 370px;
    border-right: dotted 1px #CCC;
}
#left h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    background: url(http://modocom.ca/tbcc/images/tab.png) no-repeat;
    margin-left: -49px;
    padding-left: 50px;
    padding-bottom: 15px;
    line-height: 24px;
    color: #FFF;
}
.post {
    padding-bottom: 30px;
}
#right {
    float: right;
    width: 235px;
}
#right h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    padding-bottom: 15px;
    line-height: 24px;
    color: #000;
}
#person {
    width: 235px;
    height: 430px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: 180px;
}
#footer {
    width: 100%;
    height: 35px;
    background: #000;
    margin:0 auto;
    clear: both;
    position: fixed;
    bottom: 0px;
}
#footer-content {
    width: 625px;
    margin: auto;
    color: #FFF;
}
#header {
    width:100%;
    position:relative;
    z-index:2;
}
</style>
</head>
<body>
<div id="header">
    <div id="top-bar">
        <div id="nav">
            <ul id="navigation-l">
                <li class="line"><a href="#">news</a></li>
                <li class="line"><a href="#">membership</a></li>
                <li class="line"><a href="#">golf</a></li>
                <li><a href="#">clubhouse</a></li>
            </ul>
            <ul id="navigation-r">
                <li><a href="#">contact</a></li>
                <li class="line"><a href="#">about</a></li>
                <li class="line"><a href="#">pro shop</a></li>
                <li class="line"><a href="#">tournaments</a></li>
            </ul>
        </div>
        <!-- nav -->
    </div>
    <!-- top-bar -->
    <div id="logo"> <a href="#"><img src="http://modocom.ca/tbcc/images/logo.jpg"></a> </div>
    <!-- logo -->
</div>
<div id="wrapper">
    <div id="content-bar"> </div>
    <!-- content-bar -->
    <div id="content">
        <h1>GOLF</h1>
        <img src="http://modocom.ca/tbcc/images/divider.png" />
        <div id="left">
            <h2>Course Layout</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <!-- left -->
        <div id="right">
            <h2>Categories</h2>
        </div>
        <!-- right -->
    </div>
    <!-- content -->
</div>
<!-- wrapper -->
<div id="footer">
    <div id="footer-content">
        <p>Copyright 2011 Thunder Bay Country Club</p>
    </div>
</div>
<!-- footer -->
<div id="person"> <img src="http://modocom.ca/tbcc/images/golfer.png" /> </div>
<!-- person -->
</body>
</html>


It won’t work in IE6 though due to your fixed positioning.

Thanks so much, works perfectly just one question my image on my h2 the little tab I had on the left of the titles seems to have gone, do you know how to get it back.

Thanks Paul,

Your the best!!!

Mike

Ah ok, the image is missing because of the overflow:hidden I added here:


#content {
  margin: auto;
 [B]/* overflow: hidden;[/B]*/
  padding-bottom: 50px;
  padding-top: 85px;
  width: 625px;
}

Remove that but use another float clearing mechanism otherwise the parent won’t contain the floats.

e.g.


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