SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist Scheisskopf's Avatar
    Join Date
    Nov 2004
    Location
    Southampton, UK
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table at bottom of page

    i want to align a table at the bottom of the page. It works until i resize the window, where the bottom aligned page appears in the middle of the screen still. Guess what, it works fine in firefox..

    Code:
    <TABLE style="bottom:0px; position:absolute " BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" height="35"> 
            <TR> 
              <TD bgcolor="#7299C6" valign=center align="center"><FONT CLASS="footertext"><B>2005 The Lymington & District Chamber of Commerce | Site designed by <A CLASS="footer" HREF="http://www.apollo-media.com" target="_blank">Apollo Internet Media</A> </B></font></TD> 
            </TR> 
          </TABLE>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its easy to put something on the bottom but what happens when your content reaches the bottom. Absolute elements are removed from the flow and so the content will just overwrite your footer.

    If you want your footer to move you could do something like this.
    Code:
    <!-- quirks mode on -->
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    /* mac hide \*/
    html,body{height:100%}
    /* end hide*/
    html,body{margin:0;padding:0}
    table{
    height:100%;
    width:100%;
    table-layout:fixed;
    }
    td#main{vertical-align:top;}
    td.footertext{
    background:#7299C6;
    height:35px;
    text-align:center;
    vertical-align:bottom;
    font-weight:bold
    }
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0">
    <tr> 
    	<td id="main"> <p>Page content goes here</p></td>
    </tr>
    <tr> 
    	<td class="footertext">2005 The Lymington & District Chamber of Commerce 
    	 | Site designed by <a class="footer" href="http://www.apollo-media.com" >Apollo 
    	 Internet Media</a></td>
    </tr>
    </table>
    </body>
    </html>
    IE6 needs quirks mode to work best with tables like this.

    If you want a non table version the see the 3 col demos and css faq in the css forum.

    Hope that helps anyway


Bookmarks

Posting Permissions

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