SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout aligned to bottom of page

    Hi folks,
    I've got a CSS dilemma that has been bugging me for the last day, I'm trying to create a layout with a header at the top and the content at the bottom, expanding upwards.

    Probably easier to explain with a picture... so here it is: http://tehjunk.com/layout.gif

    The outline is the browser view, header is the header, footer is the footer which should be at the bottom of the browser view or the bottom of the content (whichever is lowest), the content should sit just above the footer and expand upwards to fit the content, if that's not enough it should push the footer down.

    So far I've tried:

    Code CSS:
    html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    }
     
    #wrapper {
    position:relative;
    min-height: 100%;
    width: 100%;
    }
     
    #header {
    /* no positioning stuff in here */
    }
     
    #content {
    padding-bottom: 100px; /*equal to the height of the footer */
    }
     
    #footer {
    position:absolute;
    bottom:0;
    height:100px;
    }

    Code HTML4Strict:
    <html>
    <body>
    <div id="wrapper">
    <div id="header">header content here</div>
    <div id="content">Content here</div>
    <div id="footer">footer here</div>
    </body>
    </html>

    This kind of works, in that the header is at the top, the footer is at the bottom of the viewport or content (whichever is further down), however the content sits just below the header, whereas I want it to sit just above the footer if it's short.

    Any help appreciated. This could be done in tables quite easily, but I want to avoid that if possible.

    Thanks

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

    If you only want IE8+ support then you can do this easily like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    #outer {
        width:920px;
        margin:auto;
        background:#fcf;
        display:table;
        height:100%;
    }
    #header {height:100%}
    #content, #footer, #header {
        vertical-align:bottom;
        width:100%;
        display:table-row;
        padding:20px 0;
    }
    #content {background:#fcc;}
    #footer{background:#f99}
    #header {
        background:transparent;
        vertical-align:top;
        padding:0;
    }
    #header .inner {background:red;}
    .inner {
        padding:10px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <div class="inner">
                <h1>Header</h1>
            </div>
        </div>
        <div id="content">
            <div class="inner">
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
            </div>
        </div>
        <div id="footer">
            <div class="inner">
                <p>footer</p>
            </div>
        </div>
    </div>
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You can do it for ie6 and 7 but only if you use a fixed height header and footer.

    This example uses my sticky footer technique and a hack for ie6 and 7 to get the alignment. It's not simple though and needs to be followed carefully.

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thanks for that, I'll give the sticky footer a shot.


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
  •