Footer Beneath Sidebar

From CSS Discuss

Jump to: navigation, search

The footer problem is a big disadvantage of Absolute Layouts .

Suppose you have a page with a sidebar. You could make the sidebar a Floated Block , but it's smarter to use absolute positioning: the sidebar can be placed last in the HTML, so the user sees the content sooner.

But now you want a footer. Here's the problem: there is no way of creating a footer that spans the whole of the bottom of the page without risk of it being overlapped by the absolutely positioned column should that column be longer than the non-positioned column.

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.

Contents

The solutions are:

Using Javascript

These posts from Shaun Inman trace the evolution of what Eric Meyer has dubbed the Inman Position Clearing (IPC) technique.

Switch to floats

Use float: left or right to position all columns above, and for the footer use clear: both;

The downside is that horizontal widths must be percentages, eg ( 20%, 80% ), instead of hard units ( 20em, 100px ) for every column except the first and last. These columns can still be measured in hard units because you can float them left or right and guarantee they'll land where you like - then use percentage margins.

Actually, what I meant is that you can't have one column set to "max", as in ( 20em, max ) (to borrow the syntax of Frames)

Ryan Brill came up with a way to use floats to position the sidebar while still allowing it to be placed last in the source. See Two Column Layouts for more description and the link.

Long columns

Ensure the static column has more content than the absolute positioned one (not always possible with dynamically generated content, or a template that applies to many pages)

Partial width footer

restrict the footer to taking up space at the bottom of the static column rather than spanning the whole page (looks odd)

Archive links:

Position footer fixed at bottom of viewport

Obviously, if the footer has a lot of content (many lines), then it will consume a lot of screen space, then you need to provide some dynamic effect to reduce the height of footer when it lost focus. Using Javascript or CSS pseudo selector to do this.

Plus, this way you can place source of footer anywhere in the document, since it is fix positioned ( more absolute than absolute position :)).

See also

Personal tools