Layout problems: footer

Discussion in 'CSS' started by DvD, Feb 22, 2006.

0
  1. #1
    Hi, I`m a newbie web developer and I got a big problema with a css layout.

    This is the website: http://razheen.free.fr/lyshaus/ and my problem is that I`d like to let the footer div be always on the bottom of every page, but i never really works...

    The code is something like:
    <div id="header">content</div>
    <div id="center">content</div>
    <div id="footer">content</div>

    with:

    html, body, html>body {
    width:100%;
    height:100%;
    }

    div#footer {
    height:150px;
    }

    I tried something like this:

    div#footer {
    height:150px;
    postion:absolute;
    bottom:0;
    }

    but it doesn`t work

    Please help, this is driving me crazy!
     
    DvD, Feb 22, 2006 IP
  2. iatbm

    iatbm Prominent Member

    Messages:
    5,151
    Likes Received:
    352
    Best Answers:
    0
    Trophy Points:
    360
    #2
    #footer {
    height:150px;
    }

    and make it last <div id="footer"> in html just before </body>
     
    iatbm, Feb 22, 2006 IP
  3. DvD

    DvD Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It`s already the last div and it`s got no position values at the moment, cause it doesn`t work...

    If you try to display the website at high resolution you can see that the footer doesn`t stick at the bottom... or try to download and empty a page in local...
     
    DvD, Feb 22, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Putting the footer at the bottom of the viewport is a holdover from design for print. But, if you just must, See my footer demo that I stole from somewhere.

    It will put the footer at the bottom of the viewport if content is less than the height of the viewport. If content reaches beyond the bottom of the viewport, the footer will be at the bottom of the content.

    This works in all Moz/Gecko browsers and in IE/Win. In Opera, it works in v7, and fails in 6 & 8. Go figure. It fails in Safari, at last check which was a while ago. Failure is graceful. In those browsers where it doesn't work, the footer lies at the bottom of the content, where it belongs anyway.

    cheers,

    gary

    footertest.html source: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>Footer Test</title>
<style type="text/css">
/*<![CDATA[*/

html, body, #wrapper {
    min-height: 100%; /*Sets the min height to the
                        height of the viewport.*/
    width: 100%;
    height: 100%; /*Effectively, this is min height
                    for IE5+/Win, since IE wrongly expands
                    an element to enclose its content.
                    This mis-behavior screws up modern  
                    browsers*/
    margin: 0;
    padding: 0;
    }

html>body, html>body #wrapper {
    height: auto; /*this undoes the IE hack, hiding it
                    from IE using the child selector*/
    } 

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    }

/*background images*/
body {
    background: white url(some.png) top left no-repeat;
    }

#wrapper {
    background: transparent url(someother.png) bottom right no-repeat;
    }
/*end background stuff*/
 
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    }
 
#main {
    height: auto;
    padding: .5em;
    padding-bottom: 3em;   /*Keeps content above footer. Originally
                           used margin, but a bug in Opera7 seemed
                           to add spurious margin, pushing the
                           footer beyond the viewport even with
                           short content. */
    }

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <div id="main">
      <p>Put your whole page here, everything except the footer.</p>

      <!-- uncomment the following to see long content -->
<!-- 
      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>
-->
    </div><!-- end main -->

    <div id="footer">
      <p>Put your footer stuff here.</p>
    </div><!-- end footer -->
  </div><!-- end wrapper -->
</body>
</html>
    Code (markup):
     
    kk5st, Feb 23, 2006 IP