Search code examples
csslayoutfooter

Css styling layout issue

I have some issues regarding the basic layout of my webpage. What I want is the following: a header, then the content of the page with a menu on the left and the content on the right, and a footer. This footer should, in the case neither the content nor the menu exceeds a page in length, be at the bottom of the page with both content divs extending up to the header. In case the content exceeds the pagelength, and thus a scrollbar is shown, the footer should be at the bottom of the content.

What I currently have is the header and two columns for the content, at equal height using this page. The footer is currently at the bottom of the page, but when the content exceeds the page length it stays there.

Here's the current code:

css:

 html, body{
    margin:0px;
    height:100%;
}
#container{
    height:100%;
    width:1024px;
    margin:auto;
}
#header{
    width:100%;
    height:100px;
    background:purple;
}
#container2{
    float:left;
    width:1024px;
    background:yellow;
    overflow:hidden;
    position:relative;
}
#container1{
    float:left;
    width:1024px;
    background:red;
    position:relative;
    right:874px;
}
#col1{
    float:left;
    width:150px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#col2{
    float:left;
    width:874px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#footer{
    width:1024px;
    background:purple;
    position:absolute;
    bottom:0px;
    height:30px;
}

html:

<body>
    <div id='container'>
        <div id='header'>
            This is the header.
        </div>
        <div id='container2'>
            <div id='container1'>
                <div id='col1'>
                    Menu option 1<br />
                    Menu option 2<br />
                    Menu option 3<br />
                    Menu option 4<br />
                    ...
                </div>
                <div id='col2'>
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </div>
</body>

And ofcourse, here's the fiddle: http://jsfiddle.net/gVEpx/

EDIT: to be perfectly clear, the footer should be: 1) if the content is small: at the bottom of the page (no scrollbar) 2) if the content is big: at the bottom of the content, thus you shall only see the footer when you scroll to the bottom of the page.

EDIT 2: Didn't mention quite clearly that the two columns should both follow all the way to the footer. I want to have a border on one of the columns, and that border needs to follow through the whole page, from header to footer.

EDIT 3: Here are two awesomely drawn images for clarification: Small content and big content .

Solution

  • Look at this fiddle.
    The middle section is set to min-height: 100%, and then we use padding: 100px 0; margin: -100px 0 to give place to the header and footer. And the we use box-sizing: border-box to not altering the overall height of the page. We also use padding-bottom: 9999px; margin-bottom: -9999px to stretch the content down to the footer even when there's not enough content.
    If you want to vertically center the header and footer you can set the line-height equal to the height. If the content is going to be more than one line, then you can nest another div and use display: table-cell; vertical-align: middle;:

    HTML

    <div id="header" class="vcenter">
    <div>
        Header
    </div>
</div>
...
<div id="footer" class="vcenter">
    <div>
        Footer
    </div>
</div>

    CSS

    .vcenter {
    display: table;
}
.vcenter > * {
    display: table-cell;
    vertical-align: middle;
}