I'm really struggling with my footer. I've followed the instructions at http://www.cssstickyfooter.com/ to make my footer stick to the bottom of the page. It works fine until I add divs into the footer div - the purple background and image disappears. I would do it as a single div but I can't work out how to do the zigzag edge without creating a separate box.
Any help would be greatly appreciated! I've been trying for days to get this to work. Here is my HTML:
<body>
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<a href="index.html"><img src="images/logo.png" width="435px" height="112px" alt="Lauren Womack Logo" /></a>
<div id="menu">
<a href="/"><img src="images/menu/home.png" width="142" height="160" alt="Home" /></a>
<a href="about.html"><img src="images/menu/about.png" width="131" height="157" alt="About" /></a>
<a href="contact.html"><img src="images/menu/contact.png" width="128" height="160" alt="Contact" /></a>
</div>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="content">
<div id="rightholder">
<div class="outerleft">
<div class="inner"><h2>Animation and Interactive</h2>
</div>
</div>
<div class="outerright">
<div class="inner">
<h2>Web Design</h2>
</div>
</div>
<div class="outerleft">
<div class="inner">
<h2>Print Design</h2>
</div></div>
<div class="outerright">
<div class="inner">
<h2>Illustration</h2>
</div>
</div></div> <!-- End Content -->
</div>
</div><!-- Begin Footer -->
<div id="footer">
<div class="footeredge"> </div>
<div class="footerinner"> <p>© Lauren Womack 2012</p>
</div> </div> </div>
<!-- End Footer --></body></html>
And here's my css:
body {font-size: 13px; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;}
html {height: 100%;}
#wrapper{ min-height:100%; min-width:992px; margin-left:0px; margin-right:0px;}
#header {height: 170px; padding-top:36px; border: none;}
#menu {float:right;}
#content { position: relative; min-width: 1141px; border:none;background: none; overflow:auto; padding-right:32px; padding-left:32px; padding-bottom: 86px;}
#rightholder { float: right; clear: left;min-width: 639px;width: 60%;padding-top: 90px;}
.outerright {background-image:url(images/threadborder.jpg);min-width: 257px;width: 45%; height: 98px; margin-top: 22px; margin-bottom: 22px; margin-left: 20px;float: right;clear: right;}
.outerleft {background-image:url(images/threadborder.jpg);
min-width: 257px; width: 45%; height: 98px; margin-top: 22px;margin-bottom: 22px;margin-right: 20px; float: left;clear: left;}
.inner {padding: 5px; height: 87px;}
#footer {position: relative; margin-top:-86px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; height:86px; clear:both; padding-right: 32px; margin-left:0px; margin-right:0px; border: none;
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
.footeredge {
background-color: none;
background-image:url(images/footer/zigzag.png);
background-repeat:repeat-x;
height: 20px;
}
.footerinner {
background-color:#663366;
height: 66px;
}
How I want it to look: http://tinypic.com/r/242swuc/6 The purple box at the bottom and the zigzag isn't showing though, just the text.
There's no closing curly brace for #footer, which in turn break's your style declarations after this point.