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 4 of 4
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts

    Keeping footer at the bottom.

    Good afternoon,

    I'm working on a footer which I want to b fixed to the bottom of the page but having trouble when there is no vertical scrollbar.

    I have a main container div which contains the header and content and is centered, directly after this I have my <footer> with all my footer content.

    The footer spans 100% width of the page with a 'content' div inside set to the the same width as the main container and is also centered with the content determining the height. When I view a page which has a vertical scrollbar, this looks fine, but when I view a page which doesn't produce a vertical scrollbar, there is a gap underneath the footer.

    I've tried lots of variations of styles but can't seem to get it.

    It's only a problem because I want to add a background color, if I had left it white like the body color, it wouldn't matter.

    Here is my code anyway:

    HTML:
    Code:
    <footer>
         <div id="footer_content">
              <div id="useful_links">
                    <ul>
                    <!--etc-->
              </div>
         </div>
    </footer>
    CSS:
    Code:
    footer
    {
    	width: 100%;
    	margin: auto;
    	min-height: 100%;
    	overflow: hidden;
    	background: #841B1F;
    	border-top: 1px solid #888;
    }
    
    #footercenter
    {
    	width: 960px;
    	margin: auto;
    }
    
    footer ul
    {
    	list-style-type: none;
    	padding: 0px;
    	width: 100%;
    }
    
    footer ul li
    {
    	font-size: 13px;
    	margin-bottom: 10px;
    	padding-left: 5px;
    }
    
    footer ul li.listhead
    {
    	font-size: 15px;
    	margin-bottom: 15px;
    	padding-left: 0px;
    	color: #bbb;
    }
    
    footer ul li a
    {
    	text-decoration: none;
    	color: #fff;
    }
    
    #useful_links
    {
    	width: 200px;
    	float: left;
    }
    Anyone know how to achieve this?

    Thanks for your time.

    Kind regards,

    LC.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Try

    Code:
    html,body{height:100%}
    #container{
    min-height:100%;
    position:relative;
    }
    footer{position:absolute;
    width:100%;
    bottom:0;
    }
    .

    I presume, your code is somewhat like below.
    Code:
    <div id="container">
    ...........
    <footer>
         <div id="footer_content">
              <div id="useful_links">
                    <ul>
                    <!--etc-->
              </div>
         </div>
    </footer>
    
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Good afternoon,

    Sorry I didn't explain well enough. My footer is outside of the main container - directly underneath.

    Kind regards,

    LC.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Then, you may follow the technique at http://ryanfait.com/sticky-footer/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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