フッター (#sitemap) をテキストの下部まで拡張しようとしています。
簡単なことですが、うまくいくと思ったコードを使ってみました：
clear: both;
そして、それは機能していません。助けてください。
ウェブサイトへのリンクは次のとおりです: http://students.thenet.ca/jlandon/new/
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/isolatedhowlv2-1.css"/>
<title>Isolated Howl Web Design & Development</title>
<meta name="description" content="Isolated Howl is a web design and development company owned and operated by a single design student. Isolated Howl offers web & graphic design, development & programming, social media and website maintenance." />
<meta charset="UTF-8"/>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicon.ico">
</head>
<body>
<div id="page">
<header id="main">
<figure id="logo">
<img src="images/logo.gif" id="howllogo" alt="logo"/>
</figure>
<h1>Isolated Howl</h1>
</header>
<nav id="mainnav">
<ul>
<li><a href="workshop/index.html">Workshop</a></li>
<li><a href="services/index.html">Services</a></li>
<li><a href="school/index.html">School</a></li>
<li><a href="about/index.html">About</a></li>
<li><a href="contact/index.html">Contact</a></li>
</ul>
</nav>
<article id="mission">
<p>If you've come here looking for a quick-fix, simple website: you've come to the wrong place. If you're looking for a refreshing, stimulating & captivating website: have a seat and let's talk.</p>
<br />
<p>Isolated Howl is more than a studio. Inspiring content is collected and put through a sorting machine called relevance. It's filtered down until it is refined into the absorbing material it was meant to be. The cherry on top is the design which will be easy to use and understand - built for the user. Add in some compelling visuals and viola! The perfect-for-you website is born out of the mist.</p>
<br />
<footer><p>If this has inspired you, please check out the <a href="#">contact</a> page.</p>
<p>If you need another push in the right direction, check out the <a href="#">workshop</a>.</p>
<p>For more information, check out Isolated Howl's <a href="#">about</a> page.</p></footer>
</article>
<footer id="sitemap">
<nav>
<div class="col"><h1><a href="workshop/index.html">Workshop</a></h1>
<ul>
<li><a href="http://students.bcitwebdev.ca/jlandon">Isolated Howl V1.0</a></li>
<li><a href="/ihv2/index.php">Isolated Howl V2.0</a></li>
<li><a href="http://students.bcitwebdev.ca/jlandon/school/finalproject/nomcover.html">Restaurant Mock-Up</a></li>
<li><a href="geordieirving/index.php">Geordie Irving's Portfolio</a></li>
<li><a href="#">West Coast Finance</a></li>
<li><a href="#">Insider Films</a></li>
<li><a href="#">Shawn Muys' Portfolio</a></li>
<li><a href="#">Rayne Longboards</a></li>
</ul>
</div>
<div class="col"><h1><a href="services/index.html">Services</a></h1>
<ul>
<li><a href="#">Web & Graphic Design</a></li>
<li><a href="#">Development & Programming</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Website Maintenance</a></li>
</ul>
</div>
<div class="col"><h1><a href="school/index.html">School</a></h1>
<ul>
<li><a href="school/week1/index.html">Week 1</a></li>
<li><a href="school/week2/index.html">Week 2</a></li>
<li><a href="school/week3/index.html">Week 3</a></li>
</ul>
</div>
<div class="col"><a href="about/index.html"><h1>About</h1></a></div>
<div class="col2"><a href="contact/index.html"><h1>Contact</h1></a></div>
</nav>
<div id="connect"><h2>Stay Connected</h2>
<a href="FACEBOOK" onMouseOver="document.facebook.src='images/facebook2.gif';" onMouseOut="document.facebook.src='images/facebook.gif';"><img src="images/facebook.gif" alt="facebook" id="facebook"></a>
<a href="TWITTER" onMouseOver="document.twitter.src='images/twitter2.gif';" onMouseOut="document.twitter.src='images/twitter.gif';"><img src="images/twitter.gif" alt="twitter" id="twitter"></a>
<a href="GOOGLE+" onMouseOver="document.google.src='images/google2.gif';" onMouseOut="document.google.src='images/google.gif';"><img src="images/google.gif" alt="google" id="google"></a>
</div>
<div id="copyright">Copyright © Isolated Howl 2012-2013 Vancouver, British Columbia, Canada</div>
</footer>
</div>
</body>
</html>
CSS
@font-face {
font-family: "scala";
src: url('../fonts/sketchscalasans.ttf');
}
@font-face {
font-family: "district";
src: url('../fonts/districtthin.ttf');
}
body {
background-image: url('../images/space.jpg');
background-attachment:fixed;
color: #FFFFFF;
font: normal 100%;
background-color: #000000;
}
#page {
width: 80%;
margin-right: auto;
margin-left: auto;
}
#logo {
width: 52.08333333333333%; /* 500px / 960px */
margin-left: auto;
margin-right: auto;
}
#howllogo {
width: 100%;
}
#main {
width: 100%;
}
#main h1 {
font-family: "scala";
font-size: 4.5em; /* 72px / 16px */
font-weight: normal;
text-align: center;
}
#mainnav {
font-family: "scala";
font-size: 1.5em; /* 18px / 16px */
font-weight: normal;
text-align: center;
width: 68.75%; /* 660px / 960px */
margin-left: auto;
margin-right: auto;
}
#mainnav li {
list-style-type: none;
display: inline;
width: 19.6969696969697%;
text-align: center;
}
#mainnav ul {
width: 100%;
}
#mainnav a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
}
#mainnav a:hover {
color: #6986AE; /* light blue */
text-decoration: none;
}
#mission {
width: 68.75%; /* 660px / 960px */
margin-right: auto;
margin-left: auto;
margin-top: 1.04166666666667%; /* 10px / 960px */
padding: 3.03030303030303%; /* 20px / 660px */
font-family: "district";
font-size: 1em;
color: #000000;
font-weight: normal;
background-color: #FFFFFF;
}
#mission a:link, a:visited {
color: #3F5068; /* dark blue */
text-decoration: underline;
}
#mission a:hover {
color: #6986AE; /* light blue */
text-decoration: none;
}
#sitemap {
width: 68.75%; /* 660px / 960px */
margin-right: auto;
margin-left: auto;
padding: 3.03030303030303%; /* 20px / 660px */
font-family: "district";
font-size: 0.625em; /* 10px / 16px */
color: #FFFFFF;
background-color: #000000;
}
#sitemap a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
}
#sitemap a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#sitemap h1 {
font-size: 1.6em; /* 16px / 10px */
font-family: "scala";
}
#sitemap h1 a:link, a:visited {
color:#FFFFFF;
text-decoration: none;
}
#sitemap h1 a:hover {
color: #6986AE;
text-decoration: none;
}
#sitemap h2 {
font-size: 1.4em; /* 14px / 10px */
}
.col {
width: 18.18181818181818%; /* 120px /660px */
margin: 0 0 3.03030303030303% 0; /* 20px / 660px */
padding: 0;
float: left;
}
.col2 {
width: 18.18181818181818%; /* 120px /660px */
margin: 0;
padding: 0;
float: left;
}
#connect {
width: 15.15151515151515%;
text-align: center;
float: right;
}
#copyright {
width: 53.03030303030303%; /* 350px / 660px */
text-align: right;
float: right;
}