www.webdeveloper.com
Results 1 to 5 of 5

Thread: Get footer at the bottom of the page

  1. #1
    Join Date
    Oct 2013
    Posts
    6

    Get footer at the bottom of the page

    Hello...

    I've been struggling with keeping the footer down at the bottom of the page for a couple of days now and am at complete loss...

    I researched and read a lot and tried following different instructions:

    http://matthewjamestaylor.com/blog/k...om-of-the-page (http://matthewjamestaylor.com/blog/b...ooter-demo.htm) (this one is the current one)

    this too:
    http://jsfiddle.net/zgMYu/12/

    and this:
    http://www.dave-woods.co.uk/100-heig...out-using-css/

    And I can't make any of them work properly.. The website I'm working on is
    http://51stokescroft.com.gridhosted.co.uk/

    At the moment I stopped at matthewjamestaylor version (first link) and am stuck with it..

    The home page is only three images, and I would like the footer to be at the bottom of the page (no matter what resolution etc), and if there is more content- I'd like footer to go to the end of the page (not sticky footer)..

    At the moment, if I resize the screen, the footer goes up and stays in the middle of the page..

    If it makes any difference- I'm working on wordpress, twenty eleven child theme. I did try to ask in the wordpress forums but been told to go away and look for css help somewhere else.. :/

    Please please please help me because I'm going slightly mad...
    Will be much appreciated..

    Thanks a lot
    Dom

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    What is your current CSS?

  3. #3
    Join Date
    Sep 2013
    Posts
    221
    Below is the example code which i used in one of my application to get footer at the bottom of the page:

    * {
    margin: 0px;
    padding: 0px;
    }
    html, body {
    height: 100%;
    }
    .header, .footer {
    height: 80px;
    background-color: #EFEFEF;
    }
    .header-content {
    padding: 20px;
    text-align: center;
    }
    .headerleft {
    height: 100%;
    background-color: red;
    width: 50px;
    float: left;
    }
    .headerleftcon {
    padding: 0px 0px 0px 0px;
    }
    .headerright {
    height: 100%;
    background-color: red;
    width: 50px;
    float: right;
    }
    .headerrightcon {
    padding: 0px 0px 0px 0px;
    }
    .footer-content {
    padding: 20px;
    text-align: center;
    }
    .container {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    }
    .body {
    background-color: #C7DFFA;
    overflow: hidden;
    margin-bottom: -30000px;
    padding-bottom: 30000px;
    }
    .content {
    margin-right: 50px;
    margin-left: 50px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-bottom: 80px;
    }
    .left-sidebar {
    background-color: gray;
    width: 50px;
    float: left;
    }
    .right-sidebar {
    background-color: gray;
    width: 50px;
    float: right;
    }
    .left-sidebar, .right-sidebar {
    margin-bottom: -30000px;
    padding-bottom: 30000px;
    }
    .centerbox {
    background-color: blue;
    }
    .centerboxcontent {
    padding: 0px 0px 0px 0px;
    }
    .right-content {
    text-align: right;
    }
    .left-content {
    }
    .footer {
    clear:both;
    position: absolute;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    }
    .footerleft {
    height: 100%;
    background-color: red;
    width: 50px;
    float: left;
    }
    .footerleftcon {
    padding: 0px 0px 0px 0px;
    }
    .footerright {
    height: 100%;
    background-color: red;
    width: 50px;
    float: right;
    }
    .footerrightcon {
    padding: 0px 0px 0px 0px;
    }

    You can also follow the below link to get footer at the bottom:

    http://matthewjamestaylor.com/blog/k...om-of-the-page

    Hope this helps.

  4. #4
    Join Date
    Oct 2013
    Posts
    6
    Hi priyankagound, I'm sorry I didn't reply- thank you for your help- I didn't get notified that I had replies and only saw them now- sorry again and thank you again

  5. #5
    Join Date
    Oct 2013
    Posts
    6
    Hi simplypixie, I'm sorry I didn't reply to your reply and thank you for getting back to me- I didn't get notified that I had replies. Thanks though I worked it out following http://matthewjamestaylor.com/blog/k...om-of-the-page

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles