Tutorial :A minor CSS issue about footer


This is my simple webpage :-

<html>      <head>          <style type="text/css">              .body{                  max-width:3072px;                  min-width:3072px;                  margin:0px auto;                  background: url('Stripes.png') no-repeat #293231;                  background-attachment:fixed;                  background-position:0% 25%;              }              .back{                  z:index:0;                }            </style>      </head>      <body class="body">          <table cellpadding="0" cellspacing="0">              <tr>                  <td>                      <img src='Main.jpg' class="back"/>                  </td>                  <td>                      <img src='Page2.jpg'/>                  </td>                  <td>                      <img src='Page3.jpg'/>                  </td>              </tr>                <tr>                  <td>                      <img src='MiddleLeft.png'/>                  </td>                  <td>                      <img src='MiddleMiddle.png'/>                  </td>                  <td>                      <img src='MiddleRight.png'/>                  </td>              </tr>                <tr>                  <td>                      <img src='footer.jpg'/>                  </td>                  <td>                      <img src='footer.jpg'/>                  </td>                  <td>                      <img src='footer.jpg'/>                  </td>                </tr>              </table>          </body>  </html>  

Problem here is due to my large monitor the footer doesn't appear at the bottom of the monitor. It appears somewhere in the middle. How do i ensure that footer appears only at the bottom of the screen irrespective of the size of the screen?


Have a look at:

A Bulletproof Sticky Footer, Woohoo!

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »