I’m trying to get my footer to stick to the bottom but it does not want too and there’s also whitespace below the footer…? Please take a look at the code below. Thanks.
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Demo SITE001</title>
<link rel="stylesheet" type="text/css" href="site001.css" />
</head>
<body>
<div id="wrap">
<header>
<h1>Company Name</h1>
<p>"tagline goes here."</p>
</header>
<div id="content">
<p id="featured">Porta nec dignissim et egestas hac a lacus, risus in, urna vel. Enim in odio sed cum odio sed pellentesque
facilisis in adipiscing et, pulvinar lorem placerat lacus, lacus, nascetur facilisis scelerisque. In magna integer integer
a porttitor in duis, non facilisis, velit nec sagittis integer enim nec! Nisi magnis dictumst mid magna, est? Vel ut duis
mid scelerisque urna, rhoncus phasellus, nisi. Aenean. Tristique natoque tempor nec, ultricies vut, amet ultricies nec
scelerisque, nunc, elit! Tempor, diam augue magna nisi ut turpis phasellus, odio, placerat sociis nisi est sit mattis
placerat turpis eu eros nunc, adipiscing. Elementum? Lundium? Rhoncus.</p>
<div id="categorywrap">
<p class="category">
<span class="categorytitle">Category1</span>Diam urna sociis, vut! Urna enim, ut, nunc tincidunt facilisis.</p>
<p class="category">
<span class="categorytitle">Category2</span>Eu? Magna amet cursus magna? Turpis auctor enim odio tortor.</p>
<p class="category">
<span class="categorytitle">Category3</span>Scelerisque aliquet odio? Et tempor, ridiculus vel hac tortor, turpis.</p>
<p class="category">
<span class="categorytitle">Category1</span>Diam urna sociis, vut! Urna enim, ut, nunc tincidunt facilisis.</p>
<p class="category">
<span class="categorytitle">Category2</span>Eu? Magna amet cursus magna? Turpis auctor enim odio tortor.</p>
<p class="category">
<span class="categorytitle">Category3</span>Scelerisque aliquet odio? Et tempor, ridiculus vel hac tortor, turpis.</p>
<p class="category">
<span class="categorytitle">Category1</span>Diam urna sociis, vut! Urna enim, ut, nunc tincidunt facilisis.</p>
<p class="category">
<span class="categorytitle">Category2</span>Eu? Magna amet cursus magna? Turpis auctor enim odio tortor.</p>
<p class="category">
<span class="categorytitle">Category3</span>Scelerisque aliquet odio? Et tempor, ridiculus vel hac tortor, turpis.</p>
<p class="category">
<span class="categorytitle">Category1</span>Diam urna sociis, vut! Urna enim, ut, nunc tincidunt facilisis.</p>
<p class="category">
<span class="categorytitle">Category2</span>Eu? Magna amet cursus magna? Turpis auctor enim odio tortor.</p>
<p class="category">
<span class="categorytitle">Category3</span>Scelerisque aliquet odio? Et tempor, ridiculus vel hac tortor, turpis.</p>
</div>
</div>
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<div class="clearfix"></div>
<div class="push"></div>
</div>
<footer>Copyright © 2013. GCStudio. All Rights Reserved.</footer>
</body>
</html>
* {
margin: 0;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* SITE001.CSS STYLESHEET */
body {
height: 100%;
margin: 0 auto;
text-align: center;
width: 420px;
}
#wrap {
text-align: left;
padding-top: 25px;
border-left: 1px solid red;
border-right: 1px solid red;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
}
header {
margin-bottom: 25px;
padding-bottom: 3px;
border-bottom: 2px solid whitesmoke;
}
header h1,header p {
text-align: center;
}
#content {
float: right;
width: 300px;
}
#categorywrap {
width: 300px;
text-align: center;
}
.category {
float: left;
width: 80px;
padding: 10px;
}
.categorytitle {
display: inline-block;
font-weight: bold;
}
nav {
float: left;
width: 75px;
}
nav ul li {
margin-bottom: 2px;
border-bottom: 1px dashed red;
border-left: 5px solid blue;
padding-bottom: 5px;
}
footer {
position: absolute;
text-align: center;
height: 25px;
bottom: 0;
}
.clearfix { clear: both; }
.push { height: 25px; }
