Wickham's HTML & CSS tutorial

Header and footer tied to top and bottom of screen

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

View at different screen resolutions to see the differences, especially 800 x 600px or lower.

Footer tied to bottom of screen (1)

1a gold icon This page has had a footer tied to the bottom and it works in Firefox, Opera, Safari and IE7 where the footer is always visible. In IE6 the footer is treated like a position: absolute div and shows under the lowest content and scrolls with the rest of the page and does not stick to the bottom of a window with content more than the window height.

In Firefox and IE7 there needs to be a background-color (it can be the same color as the rest of the page) to prevent other content from showing through the footer so that the other content scrolls behind the footer. Scroll this page to see it stick (except in IE6).

The footer needs to be outside the containing div for the rest of the page.

In Firefox and IE7 a margin-bottom: 40px; (the height of the footer 30px plus a bit more) needs to be applied to the containing div for the rest of the page to prevent it being hidden at the bottom by the position: fixed footer. This creates a margin above the footer in IE6 rather than allowing for it and it is necessary to set an IF IE6 style in the head to amend the margin-bottom in IE6 back to 0px.

The styles for the page containing div and footer in the stylesheet (for Firefox, IE7 and other browsers) are:-

#container3 { width: 730px; margin-left: auto; margin-right: auto; border: none; padding: 0 20px; margin-top: 20px; margin-bottom: 40px; }
#footer { position: fixed; clear: both; width: 100%; height: 30px; bottom: 0; border: none; padding: 13px 0 0 0; text-align: center; color: #335500; background-color: #ccccc2; }

An adjustment is required for #container3 margin-bottom in IE6 in a conditional comment in the head section of this page:-

The html code for the footer is:-

<div id="footer">
<p style="padding: 0; margin: 0;">© Wickham 2006</p>
</div>

Footer tied to bottom of screen (2)

1b green icon This Fixed footer shows a footer that sticks to the bottom of a page where there is not much content, even in IE6, but stays under the lowest content in a window with content more than the window height and scrolls in the normal way. It works the same way in IE6. The footer is not always visible in modern browsers like item 1a since you need to scroll in a window with smaller height than the content. This is the most popular sticky footer code.

Other tutorials that use the same principle (ie not using position: fixed as in item 1a) but with slightly different code are:

ryanfait.com and cssstickyfooter.com.

Footer tied to bottom of screen (3)

1c green icon There's another sticky footer code here: mystrd.at which has a bottom margin on the body style. The comments note that there can be problems with the body background not displaying for the full window height.

Header and footer tied to top and bottom of screen

2 green icon See this example based on CSS Frames from 456 Berea Street website which also uses position: fixed but has been made to work in IE6 as well as Firefox.

Fixed header combined with maximum and minimum width

3 gold icon Here are two examples of a header that stays visible during scrolling of content below while the whole page is also subject to a maximum and minimum widths. Neither example is perfect because the header scrolls in IE6.

Example 1 uses a fixed width for the header and content and uses position: fixed for the header. It works in IE7, IE8, Firefox, Opera and Safari. In IE6 the header scrolls.

Example 2 has max-width and min-width for the header and content and width:expression to enable max-width and min-width to work in IE6 and a fixed header in modern browsers. In IE6 the header scrolls.

Both examples are satisfactory provided you know the probable window resolution of your target viewers; if you set the minimum just below 800px width then most viewers on computers will have no problem, just those on small screen devices.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev | next