Through the use of the DIV tag, content on a web page can be arranged in many ways. This fairly simple example uses the float attribute in the stylesheet to place the navigation division, "nav" to the right side of the page. Each DIV tag in the HTML document is given an id which corresponds to a division specified in the stylesheet by preceeding the name with the pound sign.
#nav {float:right; width:195px;clear:right; }
<!DOCTYPE html >
<HTML LANG="en">
<HEAD>
<META CHARSET="UTF-8">
<TITLE>HTML5 - Example 3 </TITLE>
<LINK REL="stylesheet" HREF= "sheets/page3.css" >
</HEAD>
<BODY>
<DIV ID="header">
<H1>Atlantic Cod </H1>
<H2>Gadus morhua</H2>
</DIV>
<DIV ID="nav">
<P><A HREF="mylink.htm">My First Computer Experience </A>
<BR> <A HREF="htmlref.htm">HTML Tag Reference </A>
</P>
</DIV>
<DIV ID="mainbody">
<P>The Atlantic Cod is a coldwater fish that was once plentiful along the continental shelf of the Northern U.S. and Canada. </P>
<P>
A bottom dweller, cod are opportunistic feeders which will eat a variety of fish, crabs and other invertebrates. While cod can grow to be more that 6 feet long and weigh more than 200 pounds, most adults will average around ten pounds. </P> <P>
They are generally found in depths of 60 to 1500 feet but will go shallower during the breeding season where each breeding female will release her free floating eggs which may number in the millions. Assuming that the eggs are successfully fertilized, only a small number of the resulting fry will survive to become adults. </P>
<IMG SRC = "images/atlantic_cod.jpg" WIDTH= "300" HEIGHT="125">
<P>
The cod's delicate white meat is high in protein and low in oils, which makes it possible to preserve the fish for long periods time without becoming rancid by drying and curing it with salt.
</P> <P>
In the days before canning and refrigeration, salt cod was traded through out the World where it became a major food staple in North America, Europe, and the West Indies. It was the increasing demand for salt cod that was an early driver in the colonization of New England and the Canadian Maritime. </P>
<P>
New and aggressive fishing technologies in the 20th century caused this seemly inexhaustible natural resource to collapse by over harvesting not only cod but its food sources as well. </P>
</DIV>
<HR>
<H3>Works Consulted </H3>
<P CLASS="footnote" >
Canadian Museum of Nature "Atlantic Cod" Natural History Notebooks. Canadian Museum of Nature 12 Feb 2013 <http://nature.ca/notebooks/english/atlanticcod.htm> from archive.org <BR>
<BR>
Wisner,Bill "McClane's New Standard Fishing Encyclopedia" McClane, A.J. Ed. Gramercy Books NY,NY 1998 p. 58-60 <BR>
<BR>
Watkins, Thayer "The Collapse of the Code Fishery of the Grand Banks" San Jose State University Department of Economics 12 Feb 2013 <http://www.sjsu.edu/faculty/watkins/grandbanks.htm> <BR>
<BR>
Woodard, Colin "Ocean's End : Travels Through Endangered Seas" Basic Books 2000 p. 72-79
</P>
</BODY>
</HTML>
BODY {background:#87cefa;}
#header {
background:#87cefa;
clear:all;
}
#nav {
background:#ffffe0;
float:right;
width:195px;
clear:right;
}
#mainbody {
background:#afeeee;
margin-right:198px;
}
H1 {color:black; font:bold 16pt "Arial"}
H2 {color:blue; font:bold 14pt "Arial"}
H2 {color:black;font:bold 12pt "Arial"}
P {color:black;font:normal 12pt "Arial"}
P.footnote {color:black;font:normal 10pt "Arial"}
HR{background-color:blue;height:5px}
A:link{font:bold;color:green}
A:visited{font:normal;color:navy}