One of the issues we've had at our company with the abandonment of table based layouts
is the positioning of footers on pages. We have many pages were the save and
cancel button must be at the bottom right of the target frame. As usual an A
List Apart article, Exploring
Footers, had some interesting information on this problem.
Applying the logic presented in the article to our specific problem entails the following:
-
Set the height of the body to 100% with no padding and margins
-
Create an outer DIV container that expanded to the body size
-
Add another 2 contains within the outer container for the content area and the footer,
like this:
<div id="container">
<div id="content">
Form Entry Area
</div>
<div id="footer">
Footer with Cancel & Save
</div>
</div>
-
Make the footer absolutely positioned with a bottom of 0 and a right position of 0.
This would make it stick to the bottom right of the page.
The CSS to do all this would look like this:
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
position: relative;
}
#content {
padding: 10px;
border: 1px groove black;
padding-bottom: 48px;
}
#footer {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
border: 1px groove black;
width: 75%;
text-align: right;
}
Note that setting the container element's position to relative makes the frame
scroll when the footer is about to overlap the content area's text. This
is what it all looks like in action: Footer
Demo.htm (.89 KB)