How to Put a Footer on a Web Page
Most websites contain footers with information such as copyright dates, "about us" information and career opportunities. While it seems as if it should be simple enough to place items on the bottom of the page, often the information will move depending on the size of the browser and the amount of text. Using cascading style sheets (CSS) and divs, you can create a simple footer that will stay at the bottom of the page regardless of the window size and the content quantity.
Other People Are Reading
Instructions
-
-
1
Set the body height and container class properties. In the CSS style sheet set the "html" and "body" classes to 100 percent height. Add a "container" class and set the min-height to 100 percent, height to auto !important, height to 100 percent and margin to 0 auto negative (footer height).
For example "html, body {height: 100%;}" and ".container {min-height:100%; height: auto !important; height: 100%; margin 0 auto -35px."
-
2
Add two classes for the footer. One class will contain the actual footer while the other class extends the margins beyond the page to make room for the footer. Set both of these classes to the same height. For example, ".footer {height: 35px ;}" and ".extender {height: 35px;}"
-
-
3
Refer to the following CSS style sheet example. Copy and paste the following code into your style sheet. Change the names and footer height as desired.
{margin: 0;}
html, body { height: 100%;}
.wrapper {min-height: 100%; height: auto !important; height: 100%;margin: 0 auto -35px;}
.footer {height: 35px;}
.extender {height: 35px;} -
4
Add these classes into the web page. Enter a div for the container tag between the opening and the closing tags for the body. Enter the content for the web page after the container opening tag. Add a div for the extender class after the contents' closing tag. Then, close the container tag after the extender's closing tag. Add a div for the footer after the container's closing tag. Enter the content for the footer. Then, close the footer tag.
-
5
Refer to the following HTML code. Copy and paste the following code into your web site. Change the names to reflect your actual classes and add content as desired.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="container">
<p>Web Content</p>
<div class="extender"></div>
</div>
<div class="footer">
<p>Footer Content </p>
</div>
</body>
</html>
-
1
