Sticky footer - content hamnar bakom footern [LÖST]
http://www.cssstickyfooter.com/ <---- Lösningen
================================
Hallå igen!
Jag håller på att knepa ihop en hemsida, där min header och footer har width:100%. Det var först när jag testade att förminska webbläsaren som jag upptäckte ett kritiskt fel; footern stannar inte längst ner på hemsidan. Bifogar lite bilder ni kan kika på (är så dålig på att förklara).
Poängen med själva footern är att den alltid ska stanna längst ner på hemsidan, oavsett hur mycket eller lite content det är, som vilken sticky footer som helst. Så som jag förstår det har jag på något vänster satt fast den i webbläsarfönstret istället, men vettefan egentligen. Bifogar HTML/CSS nedanför bilderna.
CSS
.html{
height:100%;
}
body{
background-color:#FFF;
font-family:Calibri, sans-serif;
height: 100%;
}
#wrapper{
width:100%;
min-height:100%;
}
* {
margin: 0;
padding: 0;
}
#content{
text-align:center;
width:960px;;
padding-top:50px;
background-color:#FFF;
padding-bottom:200px;
margin-left:auto;
margin-right:auto;
min-height: 100%;
}
#footer{
width: 100%;
height: 200px;
background-color: #747474;
color: #3e3e3e;
position: absolute;
bottom: 0;
left: 0;
}
HTML
<body>
<div id="wrapper">
<div id="header">
<img class="center" src="../images/motor-logo2.png" />
<div id="nav">
<ul>
<li><a href="Index.html">Start</a></li>
<li><a href="om_oss.html">Om oss</a></li>
<li><a href="tjanster.html">Tjänster</a></li>
<li><a href="projekt.html">Projekt</a></li>
<li><a href="till_salu.html">Till salu</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="googleMap"></div>
<div id="anstallda">
<img src="images/kontakt.png" />
</div>
<div id="kontakt_info">
hej
</div>
</div>
<div id="footer">
<div id="footer-boxes">
<div id="footer-box1">
<p><b>© </b></p>
<img src="images/motor-logo3.png" style="float:left; margin-right:10px;" alt="" />
<p class="footer-p"> är ett väldigt finnt fint fint fint fint företag som gör roliga grejjer. Väldigt kul!</p>
</div>
<div id="footer-box2">
<p><b>Besöksadress</b> </p>
<p><b>Telefon</b></p>
<p><b>Fax</b> </p>
<p><b>E-mail</b></p>
<p><b>Org nr</b> </p>
</div>
</div>
</div>
</div>
</body>
Någon som har ett hum om hur jag kommer på rätt väg igen?
