Css styling layout issue

Question

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: and .

If I understand you correctly you want the footer element to stay at the bottom of the screen if someone has to scroll? — robabby, Jan 04 '13 at 17:46
[The Sticky Footer](http://ryanfait.com/sticky-footer/) might be what you want — jamesplease, Jan 04 '13 at 17:47
No, not a sticky footer. If you have to scroll, the footer should not be displayed, it should be at the bottom of the content. — jdepypere, Jan 04 '13 at 17:48
Oh, silly me. But that seems to be precisely how the sticky footer works for me in Chrome. — jamesplease, Jan 04 '13 at 17:49
You might need to update your description, as I am still having a tough time understanding precisely what functionality you are going for. Do you want the footer to slide up when someone hits the end of the document? — robabby, Jan 04 '13 at 17:50
In the jsfiddle? When I scroll there, the footer gets scrolled as well. — jdepypere, Jan 04 '13 at 17:50
Right, so you just want the footer at the bottom of all the content? — robabby, Jan 04 '13 at 17:51
Try this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page — Chad, Jan 04 '13 at 18:04
arbitter, can you explain why the sticky footer doesn't satisfy your requirements? What does it do that you don't want, or otherwise what doesn't it do that you want it to do? — jamesplease, Jan 04 '13 at 19:01
I'd prefer not to have a sticky footer to prevent having people mislead that they are at the bottom of the page. — jdepypere, Jan 04 '13 at 19:08

score 1 · Accepted Answer · answered Jan 04 '13 at 19:20

1

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;
}

answered Jan 04 '13 at 19:20

Angel Yan

960
7
10

Seems to work excellent! Any known issues with certain browsers with any of this stuff? Never used stuff like box-sizing before. – jdepypere Jan 04 '13 at 19:25
`box-sizing` is not working in IE8 because of `min-height: 100%`. Don't really know why and how to solve it. – Angel Yan Jan 04 '13 at 19:33
I see... Firefox doesn't seem to like it either, when there is just a small amount of content on the page... – jdepypere Jan 04 '13 at 20:07
1

For firefox you have to add the vendor prefix to `box-sizing`. So it would be `-moz-box-sizing: border-box`. – Angel Yan Jan 04 '13 at 21:02
Doesn't seem to do it though. – jdepypere Jan 04 '13 at 21:40
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22209/discussion-between-arbitter-and-angel-yan) – jdepypere Jan 04 '13 at 23:05

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

These are the resources I used to do this for a recent project:

css anchor div to foot of page http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

In summation, you set a container element that contains everything but the footer to height: 100%. Then you give the footer a height and put a margin-bottom: [footer height] on the thing. I threw a padding-bottom on the last element in the container instead of using a separate div. See http://cureholidayitis.com.

Let me know if I misunderstood the question.

edited May 23 '17 at 11:53

Community

1
1

answered Jan 04 '13 at 17:52

alexvance

1,114
1
11
31

Looks like you understood it right! But something is going wrong though, perhaps because the major layout of the page consists of dozens of divs to get the columns to equal heights. Also, these columns should both get extended up to the footer. I want to display a border between them that goes from top to bottom. – jdepypere Jan 04 '13 at 18:09

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

I added a conditional class for the footer element using jquery, basically merged an answer from https://stackoverflow.com/a/2146903/1804496 to work with your jsfiddle.

http://jsfiddle.net/gVEpx/7/

$(function() {
   // Check if body height is higher than window height :)
   if ($("body").height() < $(window).height()) {
      $("#footer").addClass('noOverflowFooter');
   }
});

Here is another example, but without any jQuery

http://jsfiddle.net/gVEpx/8/

// Body Height
bodyH = document.body.offsetHeight;
// Window Height
windowH = window.innerHeight;
// Footer element
footer = document.getElementById("footer");
// Check if body height is higher than window height :)
if (bodyH < windowH) {
   // add to the Class attribute of the footer element
   footer.className += " noOverflowFooter";
}

edited May 23 '17 at 11:45

Community

1
1

answered Jan 04 '13 at 17:57

Zack

2,789
33
60

1

Doesn't fulfill "1) if the content is small: at the bottom of the page (no scrollbar)". – alexvance Jan 04 '13 at 17:59
@alexvance updated my answer. It should work now. I guess I didn't test it completely at first. – Zack Jan 04 '13 at 18:38
I don't know what to do about extending the column divs to fill up the space below when there is nothing there yet. – Zack Jan 04 '13 at 18:43

score 0 · Answer 4 · answered Jan 04 '13 at 18:01

0

Not sure if this is what you want? JSFIDDLE

I just modified the #container2 div to have a height relative to the #container div and assigned overflow:auto

answered Jan 04 '13 at 18:01

Usha

1,458
11
13

Eeermm it's displaying all kinds of scrollbars over here, including one in the width. And the footer is still sticky it seems. – jdepypere Jan 04 '13 at 18:07
Still a weird scrollbar... And to be cear, i **don't** want a sticky footer. – jdepypere Jan 04 '13 at 18:22
which browser are u looking at? – Usha Jan 04 '13 at 18:25
Was using Chrome 26, but same issue in Chrome 23. It seems to be a sticky footer, and instead of having a scrollbar on the right of the viewport, it's on the right of the content. – jdepypere Jan 04 '13 at 18:29

score 0 · Answer 5 · answered Jan 04 '13 at 18:13

I think this is what you are looking for

http://jsfiddle.net/pr9XJ/1/

HTML:

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

CSS:

html, body
{
    margin: 0px;
    height: 100%;
}
#container
{
    height: auto;
    min-height: 100%;
    width: 1024px;
    margin: auto;
    overflow: auto;
}
#header
{
    width: 100%;
    height: 100px;
    background: purple;
}
#container2
{
    height: 100%;
    width: 1024px;
    background: yellow;
    overflow: auto;
}
#container1
{
    padding-bottom: 32px;
    overflow: auto;
}

#col1
{
    height: 100%;
    float: left;
    width: 150px;
    background: red;
    overflow: auto;
}
#col2
{
    height: 100%;
    float: left;
    width: 874px;
    overflow: auto;
}
#footer
{
    width: 1024px;
    background: purple;
    height: 32px;
    margin-top: -32px;
    clear: both;
    position: relative;
}

The footer doesn't seem to be centered, and the columns should also follow all the way down to the footer. — jdepypere, Jan 04 '13 at 18:16

Css styling layout issue

5 Answers5