Tutorial: Bottoming Out (Absolute Div Method)

Along with horizontal and vertical centering, another common request for page placement is ensuring that a footer stays at the bottom of the browser window, even on short pages with little content. Here's one way of solving that problem. There may be other, better ones, but I know this one works.

• IMPORTANT! The following method will not work on "long" pages. It is only for a page that has a bit of a content at the top, and you want a footer at the bottom. Otherwise, your page content will overrun the footer. (This can be solved in part by creating a scrollable div for the top part of your page, but remember that if the user "shrinks" the browser window enough, the footer will begin to hide the main part of the page.) For a table-based method that does not suffer from these limitations, see this tutorial .

Once again, the problem involved here is the fact that your HTML does not "fill" the window. Thus, we begin by making sure that the HTML is 100% height in its element (i.e. in the browser window). In turn, that is only going to help us if "body" is likewise 100% height in its element (i.e. HTML). Thus we begin this way:

So now the body should fill the browser window. We still need to develop a way to get something to sit at the bottom. For this, we will create a div that is absolutely-positioned on the bottom of the page.

You will, of course, need to define a suitable width for your footer. (NOTE: remember not to place your footer inside a table or anything else. It "stands alone." I suggest placing it at the end of your HTML code, just before your closing body tag [</body>].)

You will notice that I have not added padding or margins to the footer. Here I must stress that if you want a footer that is 100% page width, you must not add horizontal padding or margins to the footer. Why not? Because you have made your HTML 100% the width of the browser window. If you add padding to that, you will see your page sprout a horizontal scrollbar, which you don't want.

That's okay, however, because you really don't need padding in your footer. You can add padding or margins to whatever it is you are placing inside, whether it is an image or paragraph text. For example, here I have given a general margin of 10px to the p selector (paragraph tag), and additionally have given it a left margin of 40px, which serves to "indent" the text a nice amount from the left edge of the page:

As noted above, unless you have very short page content, you will want to have a way to stop your main content from getting too long; otherwise, it will flow over top of the footer. If would suggest that you should plan on avoiding allowing your main content going past, say, about 350px from the top of the page. This means a rather empty page on high-resolution screens, to be sure. (I hope you have an interesting page background!) But you want to avoid having the footer floating up over your main content when users browse with windows that are not maximized.

For the sake of example, then, here is a header and main content area:

There! We are now done! Check out the result! (I also styled the h1 and p tags, as well as added a background colour; view source to see what I did.)

Note: If you are planning to use this method in Macromedia Dreamweaver MX 2004, you will probably want to either (1) paste your content text in from elsewhere; or (2) create the content text before adding your footer, unless you do your writing in code view. Dreamweaver's method of displaying overflow containers in relation to absolutely positioned divs below them makes it very hard to write.

« Return to tutorials main index.