Web Design and Publishing: Session four
Adding a footer
To complete the page layout we shall add a footer. The footer section of a web page often contains secondary navigation links and links to utilities pages such as 'about us' and 'privacy policy.' Very deep footers have been fashionable for the last couple of years, often containing tangential information and social networking links.
In our example page layout the <hr> will be removed, replaced by a div with the id footer:
<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML4/loose.dtd">
<html>
<head>
<title>id selectors </title>
<meta http-equiv="content-type" content="text/HTML; charset=UTF-8">
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Using id selectors to create a CSS page layout </h1>
</div><!--closes header div-->
<div id="nav">This is the div #nav</div><!--closes nav div-->
<div id="content">
<p>This is the div #content</p>
<p>We have now done most of the work we need to create a CSS page layout!</p>
</div><!--closes content div-->
<div id="footer">
Back to <a href="../selectors.html#back2">coursenotes</a>
</div><!--closes footer div-->
</div><!--closes wrapper div-->
</body>
</html>
The following style declaration is added to the stylesheet styles.css, which applies a solid, 1 pixel wide, red top border to the div #footer:
| #footer { | border-top: solid 1px #E3372E; |
| } |
More content is added to the left navigation div, and the resulting page looks like this:
Notice that the the height of the #nav div has increased due to its additional content.
As the #nav div has already been floated left, the #footer div moves up into the vacant space to the right of the #nav div, directly beneath the #content div.
This isn't what we want. The footer needs to be below all of the other page elements, to finish off the page neatly.
Clear property
To ensure the footer is pushed below any floated elements (either right or left floated) we add the clear:both property to the #footer declaration block:
| #footer { | border-top: solid 1px #E3372E; |
| clear: both; | |
| } |
This is how the page looks when clear:both is added to the style declaration:
Due to the clear property, the footer has had to leave a break after the floated element, and has taken its rightful place beneath the nav and content divs.
Min-height property
A div will increase in height to accommodate more content as it is added. Also, a fixed-width div will grow taller if a user increases the page's text size. For these reasons it is unusual to fix a div's height. However, we may not want to see a short div, such as the content div in the example above.
To ensure a div doesn't shrink below a specified height, we can add the min-height property to it, as in this example (the same min-height is also added to the #nav div):
| #content { | color: #FFF; |
| background-color:#E3372E; | |
| margin-left:32%; | |
| min-height: 350px; | |
| } |
Producing the following result:
The page layout is basically finished. To add further refinements, we need to understand the CSS Box Model, next.