How to Do a Footer Div in CSS
Webpages consist of a number of divisions that form its layout (e.g., header, side bar, body and footer). HTML contains elements that are used to define these different divisions including, tables, spans, layers and DIV tags. Tables were often the preferred choice for defining webpage layouts. However, since the introduction of CSS, more developers are using DIV tags to define their webpages' layouts. DIV tags in conjunction with CSS can define the header, body, side bars and footers of webpages.
Other People Are Reading
Instructions
-
-
1
Open Notepad.
-
2
Type or copy and paste the following code into Notepad:
<html>
<style type="text/css">
#body {
background-color: #CCCCCC;
height: 400px;
width: 800px;
}
#footer {
background-color: #FF0000;
height: 50px;
width: 800px;
}
</style>
<body>
<div id="body">Here is the body</div>
<div id="footer">Here is the footer</div>
</body>
</html>
-
-
3
Click "File" and then "Save as." Select "All files" as the "Save as type."
-
4
Save your file as an HTML file by placing ".HTML" at the end of the file name. Example: myfooter.html.
-
5
Find your file where you saved it on your hard drive and double-click on it. It should launch in your Web browser. You should see a colorful page layout consisting of two divisions -- a body and the DIV footer at the bottom.
-
1
