treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Simple footer but I can't make it work!

  • Hi,

    I've been plugging away at my little site with help from this forum, so I thought I could handle the footer content all by myself. I guess not.

    I've tried lots off stuff and thought I had it. It checked out on Win IE6, FF, & Opera and Mac FF & Opera. All good. Then came Safari. It wouldn't work. I've now made such a mess of the code I don't think it's worth posting (header and columns above it are still OK).

    All I want to achieve is this text + 2 image layout centered across the fixed width footer:

    http://www.ehydrant.com/footertrouble.jpg

    The basic code is this:

    Code:

    <div id="footer">

    </div>

    The page is a fixed 772px wide and centers in the browser.

    Can anyone give me some direction on how to get out of this hole?

    Thanks guys.
  • <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
    \"http://www.w3.org/TR/html4/loose.dtd\">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
    <style type=\"text/css\">
    <!--
    body {
    background-color: #FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #footer {
    width: 772px;
    margin: 0 auto;
    }
    #text {
    width: 572px;
    float: left;
    text-align: center;
    }
    #left {
    width: 100px;
    float: left;
    }
    #right {
    width: 100px;
    float: left;
    }
    -->
    </style></head>

    <body>
    <div id=\"footer\">
    <div id=\"left\"><img src=\"share.gif\" width=\"63\" height=\"18\"></div>
    <div id=\"text\"><a href=\"#\">Sitemap</a> content Copyright 2008 - All rights reserved.</div>
    <div id=\"right\"><img src=\"share.gif\" width=\"63\" height=\"18\" align=\"right\"></div>
    </div>
    </body>
    </html>
  • Thank you!! That does the trick. I just couldn't figure it out, but seeing what you did makes it obvious... ;)
  • Hey no probs ^^