Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS sticky footer?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27958
    ajay53213
    Participant

    I’ve been a long time lurker here and have searched for my solution to no luck!
    I’ve literally been working or trying to fix this all day… Any help would be greatly appreciated!!!
    I am trying to make my footer stay at bottom of browser window regardless of how much content is above it. It seems like i’ve tried everything…. I dunno?

    CSS CODE
    #footermainPan{background:url(images/footerbg.gif) 0 0 repeat-x #F4F4F4; color:#212121; position:relative; margin:0 auto; height:65px; clear:both;}

    #footerPan{width:689px; position:relative; margin:0 auto; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; padding:15px 0 0;}

    HTML CODE
    <div id="footermainPan">
    <div id="footerPan">
    <ul>
    <li><a href="#">home</a>| </li>
    <li><a href="#">about</a>| </li>
    <li><a href="#">engage</a>| </li>
    <li><a href="#">events</a> | </li>
    <li><a href="#">photos</a> |</li>
    <li><a href="#">contact</a></li>
    </ul>
    <p align="center" class="copyright">┬ęcopyright 2010 | all rights reserved</p>
    </div>
    </div>

    #71490
    Nipperkin
    Member

    I had this problem recently: a website with a lot of content on a some pages, next to none on others. I tried every solution I could find on-line. I could get the footer to stick to the bottom of the screen, no problem, but on pages with a lot of content that meant it appeared in the middle of the page (!). Furthermore, since these solutions used absolute positioning, on those pages the content scrolled but the footer remained fixed. Hardly what I was hoping to do.

    In the end I found a solution that worked: on those pages with just a bit of content I added the "sticky CSS code" to the footer div in the HTML of the page, like this:

    Code:

    and on those pages, the footer appears at the bottom of the screen. On all other pages it appears on the bottom of the page. You can check it out here: http://www.mindmadebooks.com/.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.