Grow your CSS skills. Land your dream job.

Footer help

  • # December 7, 2009 at 7:07 pm

    Got a footer that just won’t go down to the bottom of the site. I’ve tried the Sticky Footer and I have tried other techniques that have worked for me in the past. If you have any ideas, here is what I have done so far:

    CSS:

    Code:
    @charset “utf-8″;
    /* Created by David Coxsey
    December 03, 2009 */

    *{
    margin: 0;
    padding: 0;
    }

    body {
    background: url(images/background_slice.png) repeat-x top #b8afb4;
    font: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    color: black;

    }

    .clear { clear: both; }

    #pageWrap {
    width: 825px;
    margin: 0 auto;
    }

    /* Header and Logo */
    #pageWrap #header{
    height: 196px;
    top: 0;
    left: 0;
    position:relative;
    }
    #pageWrap #header #logo {
    position: absolute;
    background: url(images/logo.png) no-repeat;
    top: 0px;
    left: 0px;
    height: 150px;
    width: 825px;
    }
    #pageWrap #header #menu {
    position:absolute;
    top: 150px;
    left: 0px;
    height: 48px;
    width: 825px;
    }
    #pageWrap #header #menu ul {
    list-style:none;
    top: 15px;
    left: 9px;
    margin-top: 15px;
    margin-left: 9px;
    font-size: 1.7em;
    font-weight: bold;
    }
    #pageWrap #header #menu li a{
    display: block;
    text-decoration:none;
    width: 90px;
    float: left;
    color: black;
    }
    #pageWrap #header #menu li a:hover, #header #menu li a:active {
    color:white;
    }

    /* Main Content Area */
    #mainContent {
    position:relative;
    width: 825px;
    top:0px;
    padding-bottom: 220px;
    height: auto;
    height: 100%;
    min-height: 500px;

    }
    /* contentLeft */
    #mainContent #contentLeft {
    width: 550px;
    float: left;
    position:absolute;
    }
    #mainContent #contentLeft h1 {
    font-size: 2em;
    padding-bottom: 10px;
    }

    #mainContent #contentLeft p {
    text-indent: 10px;
    color:black;
    padding-bottom: 5px;
    width: 400px;
    }
    /* contentRight */
    #mainContent #contentRight {
    width: 276px;
    left:650px;
    float: right;
    position:absolute;
    }

    #mainContent #contentRight a
    {
    text-decoration: none;
    }
    #mainContent #contentRight a:hover
    {
    font-style: italic;
    color: White;
    }
    #mainContent #contentRight img
    {
    border:0px;
    float:left;
    padding-right: 5px;
    }
    #mainContent #contentRight #movie
    {
    top: 0px;
    left: 0px;
    padding-bottom: 50px;
    }
    #mainContent #contentRight #movie h1
    {
    font-size: 1.7em;
    color: Black;
    padding-bottom: 3px;
    }
    #mainContent #contentRight #movie h2
    {
    font-size: 1.2em;
    color:Black;
    padding-bottom: 4px;
    }

    /* Footer */

    #footer {
    background:url(images/footer-slice.png) repeat-x;
    }
    #footer #footerWrap {
    width:825px;
    height: 220px;
    left: 275px;
    background:url(images/footer.png) no-repeat;
    position: relative;
    padding: 39px 0px 40px 335px;
    }
    #footer #footerWrap #twitter {
    position: absolute;
    top: 123px;
    left: 57px;
    height: 52px;
    width: 180px;
    font-weight: bold;
    text-indent: 5px;
    }
    #footer #footerWrap #twitter a{
    text-decoration: none;
    color:black;
    }
    #footer #footerWrap #twitter a:hover{
    color:white;
    }
    #footer #footWrap #twitter .time {
    font-style: italic;
    }
    #footer #footerWrap #follow {
    position: absolute;
    top: 195px;
    left: 12px;
    font-weight: bold;
    }
    #footer #footerWrap #follow a{
    text-decoration: none;
    color:black;
    }
    #footer #footerWrap #follow a:hover{
    color:white;
    }
    #footer #footerWrap #social {
    position: absolute;
    top: 139px;
    left: 487px;
    }
    #footer #footerWrap #social ul {

    list-style:none;
    width: 96px;
    height: 32px;
    float: right;
    }
    #footer #footerWrap #social li a{
    display:block;
    text-decoration:none;
    float:right;
    }
    #footer #footerWrap #social img {
    border:none;
    }

    And some html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    This is a heading.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mattis est in eros posuere elementum. Morbi sed quam vitae sem rutrum consequat vulputate ut nisi. Sed pretium nibh a tellus mattis at fermentum dui consequat. Morbi scelerisque velit sapien, quis congue justo. In hac habitasse platea dictumst. Quisque at nisl nisi, quis posuere tortor. Cras eget libero enim, ut pretium risus. Nulla tempor commodo elit, vel sagittis diam sagittis sed. Nulla facilisi. Phasellus posuere egestas ultricies. Ut elementum vehicula tristique. Praesent suscipit ultricies libero, vitae imperdiet nunc iaculis ut. Suspendisse nibh purus, feugiat at consequat in, viverra euismod elit. Phasellus facilisis, urna ac adipiscing accumsan, nisi velit pharetra nisl, rhoncus interdum mi nisi vitae velit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mattis est in eros posuere elementum. Morbi sed quam vitae sem rutrum consequat vulputate ut nisi. Sed pretium nibh a tellus mattis at fermentum dui consequat. Morbi scelerisque velit sapien, quis congue justo. In hac habitasse platea dictumst. Quisque at nisl nisi, quis posuere tortor. Cras eget libero enim, ut pretium risus. Nulla tempor commodo elit, vel sagittis diam sagittis sed. Nulla facilisi. Phasellus posuere egestas ultricies. Ut elementum vehicula tristique. Praesent suscipit ultricies libero, vitae imperdiet nunc iaculis ut. Suspendisse nibh purus, feugiat at consequat in, viverra euismod elit. Phasellus facilisis, urna ac adipiscing accumsan, nisi velit pharetra nisl, rhoncus interdum mi nisi vitae velit.


    # December 7, 2009 at 11:50 pm

    Hi David,

    Do you happen to have a live link? Or can you explain how the footer is supposed to stay at the bottom?

    I scanned through the code, and see no reason as to why the footer should go to the bottom of the page/screen.

    # December 8, 2009 at 7:25 am

    No live link right now. What happens is that the footer doesn’t sit at the bottom of the page and when the main content area has a large about of information in it, the content area will overflow the footer.

    # December 8, 2009 at 11:21 am

    I believe it. What do you want your footer to do?

    You said you tried using sticky footer. Did you not get it to work?

    # December 9, 2009 at 8:03 am

    No, I didn’t. I’m going to try it again, but in the meantime I am going to upload the site to my server so you can take a gander.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".