0

I am trying to mimic the layout of having a fixed header and footer with content that fits between the two of them WITHOUT javascript or using a table. You can see what I'm looking for HERE

George Milonas
  • 553
  • 7
  • 22
  • 1
    Could you please be a little more specific? Many people reading this question may interpret what you are trying to do differently. It helps to show a snippet of code that you have already tried, and ask some specifics about what you are having trouble with. See the FAQ for more examples and guidelines for reasonably scoped questions: http://stackoverflow.com/faq – Cypress Frankenfeld Aug 05 '12 at 16:44
  • Welcome to Stack Overflow! Could I ask you what problem you're having that's stopping you? What's your mark-up? What elements are you trying to position? What help do you need? – David Thomas Aug 05 '12 at 16:44

1 Answers1

0

Actually this is simple. Here is the full code, just copy and paste it.

Credit to Jeremy (http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div).

<style type="text/css">
html, body 
{ 
    height: 100%;
    padding: 0;
    margin: 0; 
} 

#header
{
    height: 100px;
    color: #FFF;
    background: #000;
}

#content
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    color: #FFF;
    background: #333;
}

#footer
{
    height: 100px; 
    color: #FFF;
    background: #000;   
}

#divider 
{
    height: 100px; /*Divider must be same height as Footer */
}

</style>

<div id="content">
    <div id="header">
        Header
    </div>

    Content Text

    <div id="divider"></div>
</div>
<div id="footer">
    Footer
</div>
Axel
  • 62
  • 1
  • 5