Tutorial: Bottoming Out Your Footer (Table Method)

Okay, you want your footer to stay at the bottom of the page, but you have pages of varying lengths and don't want a scrolling div, such as our other tutorial gives you. Here's another way to bottom out your footer, and have it "float" with your content.

Again, you need your HTML and your body to "fill" the window. The table method also means that we need to create a table that takes up this entire area as well. We'll call this table "total" for fun. Thus we begin to style our CSS this way:

To get our footer to sit at the bottom of the page, we need to create a table with two rows, one to hold the main content, and one to hold the footer. The table we will tag id="total," and we will also need to apply CSS to the lower cell that will contain the footer.

In your HTML: <table id="total">

Technically, all we should have to do is give a height (via CSS) to the lower cell and use the cell itself as a footer. Unfortunately, on table elements, Internet Explorer (IE) understands the height property as minimum height, meaning that on a page with little content, your footer could take up most of the page. Clearly, that is unacceptable. Consequently, to play with IE we need to apply CSS, not only to the bottom cell; we also need to create a div with the correct height and place it inside the bottom cell. Thankfully, with a little effort, IE does get this right.

Here, then, is what I did with the rest of my CSS:

(Note: make sure you apply the background color to the div [#footer], not to the table cell [#footercell].)

To make this work, you will need to do one more thing to get IE to render properly. In your HTML, you need to align the bottom cell to the bottom. Otherwise, the footer div will float up to the middle of whatever height IE is allowing the bottom cell to grow to. So apply the ID and alignment to your cell:

<td id="footercell" valign="bottom">

Okay, now you should have it working. When your page has little content, the footer will display at the bottom of the browser window. As you get more content on your page in the upper cell, it will push the footer down.

View the working demo here.

 

« Return to tutorials main index.