Short-page floating DIV

Icon




Q. I'm a beginning web designer who's made some short web pages. In other words, they don't fill a typical browser window. I'd like to have a particular DIV that floats at the bottom of the browser window for these short pages regardless of the window size.

To put it another way, if a page is short and the browser window is tall, I want a particular DIV to be at the bottom even though the page doesn't fill up the window.

The solution should work for both old and new browsers. How can I do this without relying on CSS3 features?

A. I'll outline a JavaScript approach below that seems to work. There's a pure-CSS way to do this and it's included. However, the pure-CSS approach has problems related to overlapping content. So give the JavaScript solution a try.

Comments or corrections may be sent to: oldcoder@yahoo.com





First, here's a solution that's simple but not complete. It was provided by a reader who declined credit.

You can use HTML and CSS code of the following form to create a DIV named fsfooter that floats at the bottom of the browser window. However, if the user reduces the height of the browser window too much, the floating DIV will overlap the page content proper.

Another reader suggested changing the word absolute here to fixed. This change fixes the overlap problem in some cases. However, it doesn't address the issue in others.

Note: If you try the fixed change, you'll need to add an appropriate DOCTYPE directive at the start of the HTML code. Some versions of Internet Explorer won't support fixed without the directive.

It may be possible to make changes to the CSS code to correct the overlap problem in all cases and in a portable (i.e., cross-browser) way. However, I haven't found changes of this type. Therefore, for now, I suggest using the JavaScript solution presented at a later point.


<html>
<head>
<style type="text/css">
#fsfooter {
    bottom:   0px;
    height:   30px;
    position: absolute;
    width:    100%;
}
</style>
</head>
<body>
<p>1st paragraph of content</p>
<p>2nd paragraph of content</p>
<div id="fsfooter">Floating DIV</div>
</body>
</html>




Here's a JavaScript solution that works a bit better. Copy the JavaScript file spfooter.js from this link to the appropriate web-page directory. After the file is installed, structure web pages as shown in the sample HTML code below:


<html>
<head>
<script type="text/javascript" src="spfooter.js"></script>
</head>
                         <!-- JS routine must be called at -->
                         <!-- startup and on resize        -->
<body onload="spfooter()" onresize="spfooter()">

<div id="bodybig">       <!-- bodybig   will be stretched  -->
<div id="bodysmall">     <!-- bodysmall will stay old size -->
Hello                    <!-- Page content                 -->
</div>                   <!-- End of div bodysmall         -->
</div>                   <!-- End of div bodybig           -->
                         <!-- footer will go at the bottom -->
<div id="spfooter" style="margin-top:0px;">
Goodbye                  <!-- Footer content               -->
</div>                   <!-- End of div footer            -->
</body>
</html>

To see the preceding HTML code in action, or to download the code, use this link. If things are working correctly, the word Goodbye should float at the bottom of the browser window even if the window is resized.

The key steps in the HTML code are as follows:

  1. Load the JavaScript file spfooter.js discussed above

  2. Arrange for the JavaScript function spfooter to be called at page-load time and whenever the user resizes the page (the HTML code above illustrates this)

  3. Put the page content except for the floating DIV inside a DIV with the id bodysmall. Put the latter DIV inside another DIV with the id bodybig.

  4. Give the floating DIV the id spfooter

  5. Set the floating DIV's margin-top property to zero





Here's a screenshot that shows what the sample HTML code provided above looks like when displayed. In this case, the word Hello represents the page content proper and the word Goodbye represents the floating DIV discussed previously.


image




This screenshot shows a real-world application of the code. The navigation bar at the bottom floats there regardless of the window height unless the user makes the window so short that this would cause overlapping DIVs. In this case the navigation bar is positioned just below the page content proper.


image




Hosting provided by Zymic.

For acknowledgments related to CSS and other code used, click here.

Linked or embedded works (software, books, articles, etc.) are presented under their own licenses.

Other unique content on this page, excluding screenshots, is distributed under the following license: C.C. Attribution NonCommercial ShareAlike 3.0. In some cases, screenshots are distributed under the same license. In other cases, the associated program's license applies.

image Valid XHTML 1.0