Not signed in (Sign In)

Vanilla 1.1.8 is a product of Lussumo. More Information: Documentation, Community Support.

Syntax Highlighting

You can highlight any code you post by wrapping it in the BBCode tags, [code lang="css"]code here[/code]. Other usable lang values are "xml", "html", "xhtml", "css", "js", "javascript", "php", "sql", "python", "py", "ruby", "rb", and "java".

Choose the Format Comments option "SyntaxHighlighter" to use this BBCode. Note that no other BBCode is supported at the moment.

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

Bottom of Page

1 to 2 of 2

  1.  
    • CommentAuthorg5temp
    • CommentTimeMar 2nd 2010
     
    Hello...

    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.

    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
    <code><%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShortPage.aspx.cs" Inherits="DIVsExample8_ShortPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </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>
    </code>

    CSS
    <code>*
    {
    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;
    }
    </code>


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

    HTML
    <code><%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShortPage.aspx.cs" Inherits="DIVsExample7_ShortPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </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>
    </code>

    CSS
    <code>*
    {
    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;
    }
    </code>




    Thanks!!!
  2.  
    Yes it's possible but I think you asking too much.
    I don't mind do small fixes for people what you asking is takes time to do.

    Cheers, DS

1 to 2 of 2

  1.  

Valid XHTML 1.0 Strict

Valid CSS!