The bottom-most horizontal block of a page layout is often referred to as a "footer". In it, as in other blocks of the page, design elements are placed, but unlike others, specific problems often arise with the positioning of this particular block. They are connected with the fact that different browsers understand CSS standards differently and it can be quite difficult to get the footer to be at the bottom edge of the browser window. Below is the code for one of the solutions to this problem.
Necessary
Basic knowledge of CSS and HTML
Instructions
Step 1
In the very first line of the page's source code, place a reference to the XHTML 1.0 Transitional specification:
Step 2
Place the main blocks of the page structure inside the body of the document (between the and tags). The block into which the main content will be placed must consist of two nested layers. For example, let the outer one have the identifier OuterDiv, and the inner one - InnerDiv:
This is where the main content of the page will be.
Behind them, place a footer block with an identifier, for example, FooterDiv:
Footer of the page.
Step 3
Place in the head part of the HTML code (between the and tags) a link to an external file with a description of css styles:
@import "footerStyle.css";
Step 4
Save the complete master page code to a file with the html extension. It might look like this:
Pressed footer
@import "footerStyle.css";
This is where the main content of the page will be.
Footer of the page.
Step 5
Create a stylesheet file - a plain text file that should be saved with the css extension and the name you specified in the HTML code (footerStyle.css). Write to this file the following style descriptions for the blocks used in the page:
* {margin: 0; padding: 0}
html, body {height: 100%;}
body {
position: relative;
color: # 222222;
}
#OuterDiv {
margin: 0;
min-height: 100%;
background: #aaaaaa;
color: # 222222;
}
* html #OuterDiv {height: 100%;}
#FooterDiv {
position: relative;
clear: both;
margin-top: -60px;
height: 60px;
width: 100%;
background-color: DarkBlue;
text-align: center;
color: #eeeeff;
}
. InnerDiv {
width: 100%;
float: left;
}
