I've set up my website container as a white box on a black background, centered on the page to allow for content resizing. Here is the code I used:
.container {
position: absolute;
background-color: white;
min-height: 90%;
top: 5%;
width: 95%;
left: 2.5%;
}
I attempted to add a footer to the layout with the following code:
footer {
margin-left: auto;
margin-right: auto;
width: 85%;
text-align: center;
height: 2.4em;
border-top: 1px solid black;
}
When trying to position the footer at the bottom of the page, I encountered some challenges. I thought adjusting the container's content position would work:
%header
%section.content /<----
%footer
I attempted setting a min height of 100% for the container content, but it did not produce the desired result.
For a better visualization, here is a fiddle: http://jsfiddle.net/a6QTv/1/