Home/ Questions/Q 8675661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:00:25+00:00

This is the code I am working with currently: http://jsfiddle.net/HMsKa/39/ HTML <!DOCTYPE HTML PUBLIC

  • 0

This is the code I am working with currently: http://jsfiddle.net/HMsKa/39/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
    <title>Title</title>
    <link href="main2.css" rel="stylesheet" type="text/css">
    <!--[if !IE 7]>
    <style type="text/css">
    #wrap {display:table;height:100%}
    </style>
    <![endif]-->
</head>
<body>

<div id="wrap">
    <div id="header">
        <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
        <ul>
            <li><a href="/posts/list/">Link1</a></li>
            <li><a href="/posts/create/">Link 2</a></li>
            <li><a href="/about">Link 3</a></li>
        </ul>
    </div>

    <div id="main">
        There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
    </div>

</div>

<div id="footer">
    &#169; 2012 Company, Inc.
    <ul>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/faq">FAQ</a></li>
    <li><a href="/terms">Terms</a></li>
    <li><a href="/privacy">Privacy</a></li>
    </ul>
</div>

</body>
</html>​

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrap {
    min-height: 100%;
}

#main {
    padding-bottom: 60px; /* must be same height as the footer */
    overflow:auto;
    background-color: purple;
}

#footer {
    height: 60px;
    margin-top: -60px; /* negative value of footer height */
    position: relative;
    clear:both;
    background-color: blue;
} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

#header {
    background-color: orange;
    height: 60px;
}

I am trying to have a setup a bit like here on stackoverflow, where the background for the header and footer extends all the way across the page, but the header content, footer content and main content is in a fixed width column in the middle of the page. After playing around on JSFiddle for a bit I haven’t had a lot of luck and I’m sure there is a right and a wrong way of doing this.

Can someone should me the best way of achieving this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This will make your centre column 80% of screen width:

    #main {
   width: 80%;
   margin: 0 auto;
}

    This will make it fixed at 900px:

    #main {
   width: 900px;
   margin: 0 auto;
}

    EDIT:

    #header {
    width: 100%;
}
#header_content {
    width: 900px;
    margin: 0 auto;
}
#main {
    width: 900px;
    margin: 0 auto;
}

    HTML:

    <div id="header">
    <div id="header_content">My header content, 900px in width</div>
</div>
<div id="main">
    My main content, also 900px in width;
</div>
    • 0