Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Can’t keep footer below content

    Hey everybody,

    I am having footer issues. Not sure what I'm doing wrong here, but my footer behaves correctly when the content does not overflow on the screen(see here www.arcwebsolutions.net). When the content does overflow and you need to scroll to see all the content, the footer stays where it is positioned and the content sits underneath it(see here www.arcwebsolutions.net/overflow.html), this is precisely my problem. I need the footer to always be below my content. Please take a look at my code, and guide me in the right direction!

  • #2
    New Coder
    Join Date
    Jun 2013
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Try something like this in your footer CSS

    #footer {
    position:absolute;
    bottom:0;
    width:100%;
    }

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Why did you absolutely position your footer? Take this out:

    Code:
    position: absolute;
    My signature :)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    There are several kinds of fixed footers, or sticky footers as they are often called. The ways to create 'em are described here: How to Make a Fixed ('Sticky') Footer.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #5
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the replies guys...

    Quote Originally Posted by ttkim View Post
    Why did you absolutely position your footer? Take this out:

    Code:
    position: absolute;
    The reason I have it absolutely positioned is to keep the footer at the bottom of the page when a page doesnt have much content at all, so I dont have a big blank area below my footer....

    I've read a few tutorials, and they all seem to use absolute position with bottom:0;

    but for the love of god I cannot keep the footer at the bottom of the page when the content "overflows"

    Any more suggestions?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Without code(HTML, CSS) we're shooting in the dark. Please post.
    Evolution - The non-random survival of random variants.

  • #7
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Without code(HTML, CSS) we're shooting in the dark. Please post.
    Since I have no idea where I made an error, I thought it would be easier if I just linked you to my website, from there you could view my code entirely.

    But, since you asked here is some snippets where I think may be the issue.

    #footer {
    clear: both;
    float: left;
    width: 100%;
    height: 40px;
    position: absolute;
    bottom:0;
    left:0;
    margin: 0 auto;
    font: 400 1em arial, sans-serif;
    letter-spacing: 0.1em;
    background: url(images/footerbg.gif) no-repeat top center;
    }

    #wrapper {
    position: relative;
    height: auto;
    height: 100%;
    min-height: 100%;
    }

    <div id="wrapper">
    <div id="header" class="width">
    <div id="titledesc">Web Developement / Graphic Design / Logo Design</div></div>
    <div id="menu" class="width">
    <ul>
    <li>
    <a href="index.html" onFocus="blur()">
    <span class="title ">Home</span>
    </a> </li>
    <li>
    <a href="#" onFocus="blur()">
    <span class="title ">Services</span>
    </a> </li>
    <li>
    <a href="#" onFocus="blur()">
    <span class="title ">Featured Work</span>
    </a>
    </li>
    <li>
    <a href="#" onFocus="blur()">
    <span class="title ">Contact Arc</span>
    </a>
    </li>
    </ul>
    </div>
    <div id="page">
    <div id="columns" class="widthPad">
    <div class="floatLeft width100">
    </div>
    </div>
    </div>
    </div>
    <div id="footer">
    <div id="bg" class="width">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Featured Work</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#" class="last">Contact</a></li>
    </ul>
    </div>
    </div>
    </div>
    Last edited by fallenmedia; 06-19-2013 at 09:35 AM.

  • #8
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Nothing?

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by fallenmedia View Post
    Nothing?
    What do you mean, nothing? The answer is in the tutorial I linked. You will probably have to change your whole layout code, but if you understand the principle, that should take you no longer than 10 minutes. Also, if you wanna be a web designer, you will have to master the layout techniques and will have to be able to work with tutorials.
    Last edited by Frankie; 06-19-2013 at 12:28 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #10
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Frankie, I apologize for sounding rude.

    I have read many tutorials and even read the ones in your link. I believe the min-height layout is what I'm striving to achieve. I am using the min-height 100% in my content div, and using absolute position bottom: 0 in my footer div, just like all the tutorials recommend. The footer is staying on the bottom when the page doesnt require a scroll, but when the page does require scrolling it becomes fixed. I just don't know where I'm going wrong.

  • #11
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,
    Quote Originally Posted by fallenmedia View Post
    Since I have no idea where I made an error
    You've made several errors:

    1) You forgot to give a 100% height to the html element

    Code:
    html {
    height:100%;
    }
    2) You gave a 100% height for #wrapper. The 100% height is usefull only for IE6- and must not be assign to other browsers (use conditional comments if necessary)
    Code:
    #wrapper {
    	position: relative;
    	min-height: 100%;
    	background: url(images/contentbg.gif) no-repeat top center;
    }
    3) In the html code, The footer must be inside #wrapper

    4) The background-image should be in #wrapper if you want it to take full height

    5) Why do you float #page ? There is no need; just remove it:
    Code:
    #page {
      text-align: left;
      padding-bottom:40px;
    }
    Why don't you set directly the width on #wrapper ?
    Last edited by Candygirl; 06-19-2013 at 05:45 PM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    fallenmedia (06-19-2013)

  • #12
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks Candy,

    I will try to correct these when I get home. I was under the impression I did have my footer inside the wrapper. I must have an extra </div> tag laying around or something?

  • #13
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Yes first of all you should allways try to validate your code and fix the errors.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •