SitePoint Sponsor

User Tag List

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

    Help Creating 2 Column Layout with Header, 100% Height, and "Sticky" Footer

    Help Creating 2 Column Layout with Header, 100% Height, and "Sticky" Footer


    Hello...

    I know there have been similar posts, but Iím needing help laying out my page via DIVs and CSS. Iíve spend way too much time searching the Internet and trying different things, but I canít figure it out. So, Iím here to ask for help.

    What we need is a two column layout (left column approx. 200px with the right column 100% for the rest of the width). We need a header on top and a footer on bottom. Both the header and footer can be fixed heights if thatís whatís needed. The footer needs to ďstickĒ to the bottom of the browser. The two columns both need to fill in 100% height down to the footer when the content is short, and push the footer down when the content is long. Finally, we need this to be a CSS-only solution (no JavaScript).

    First question... Is this even possible? Like I said, Iíve been spending way too much time trying to get this working and no luck.

    (note: In the examples below, I had to change the DOCTYPE and remove all URLs to get the post to go through.)

    Hereís one of my close attempts in which I have 2 columns but the footer is pushed down past the bottom of the brower:

    HTML
    <!DOCTYPE html PUBLIC DTD XHTML 1.0 Transitional xhtml1-transitional.dtd">

    <html>
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div class="header">
    Header
    </div>
    <div class="wrapper1">
    Page Content1
    </div>
    <div class="wrapper2">
    Page Content2
    </div>
    <div class="push"></div>
    <div class="footer">
    Footer
    </div>
    </form>
    </body>
    </html>


    CSS
    *
    {
    margin: 0;
    }

    html, form
    {
    height: 100%;
    }

    body
    {
    border: 0;
    font-family: 'Trebuchet MS', Tahoma, Verdana, Helvetica, Arial, 'MS Sans Serif';
    /* font-size: small; */
    height: 100%;
    margin: 0;
    padding: 0;
    }

    .header
    {
    height: 120px;
    background: Yellow;
    }

    .wrapper1
    {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
    width: 200px;
    float: left;
    background: Green;
    }

    .wrapper2
    {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
    margin-left: 200px;
    background: Blue;
    }

    .footer, .push
    {
    height: 60px;
    clear: both;
    }

    .footer
    {
    background: Red;
    }



    Here's another attempt where I get the footer in the right place but I can't get the 2 columns:

    HTML
    <!DOCTYPE html PUBLIC DTD XHTML 1.0 Transitional xhtml1-transitional.dtd">

    <html>
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div class="wrapper">
    <div class="header">
    Header
    </div>
    Page Content
    <div class="push"></div>
    </div>
    <div class="footer">
    Footer
    </div>
    </form>
    </body>
    </html>


    CSS
    *
    {
    margin: 0;
    }

    html, form
    {
    height: 100%;
    }

    body
    {
    border: 0;
    font-family: 'Trebuchet MS', Tahoma, Verdana, Helvetica, Arial, 'MS Sans Serif';
    /* font-size: small; */
    height: 100%;
    margin: 0;
    padding: 0;
    }

    .wrapper
    {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
    background: Blue;
    }

    .header
    {
    background: Yellow;
    height: 120px;
    }

    .footer, .push
    {
    height: 60px;
    clear: both;
    }

    .footer
    {
    background: Red;
    }





    Thanks!!!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Change the widths to suite, but yes this is possible
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •