oneman oneman - 26 days ago 6
CSS Question

Why is my footer at the top of my page?

Firstly, I was used

#copyright {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px
}

footer {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
}


Which worked fine until I tested my site on a smaller screen and realised the footers were overlapping the content. So then I tried setting
html
and
body
height to
100%
and also setting my
wrapper
to min height
100%
and placing the footer underneath, in hopes of a more relative footer. But now it is stuck at the top, what is causing this ?



#wrapper {
display: block;
position: fixed;
text-align: center;
min-height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

#header p {
font-size: 2em;
margin: 0;
}

#header ul {
list-style-type: none;
}

#header ul li {
display: inline;
padding: 20px 20px;
font-size: 1.5em;
margin: 0 30px;

}


#copyright {
position: relative;
height: 50px;
width: 100%;
text-align: center;
font-size: 0.8em;
}

#footer {
position: relative;
margin-top: 15px;
height: 50px;
width: 100%;
text-align: center;
font-size: 0.8em;
}

#footer ul {
list-style-type: none;
}

#footer ul li {
display: inline;
margin: 0 15px;
}

<div id="wrapper">
<div id="header">
<p>Pavel Design</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.</p>
</div>
</div>
</div>

<footer id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="mailto:info@pavel.co.nz">info@pavel.co.nz</a></li>
</ul>
</footer>

<footer id="copyright">
<p>© Pavel Design 2016 | Photography, design and website construction by Pavel Design 2016</p>
</footer>





EDIT:

My wrapper uses fixed position so that I can assign
top: 0
bottom: 0
and so on, because I use a background image that covers the whole screen, when I only use
min-height
and
min-width
the background image doesn't cover the whole screen, instead it leaves a small white border around the outside of the page

Answer

You don't need to give two footers and also you don't need to give id="footer" as HTML5 already provided you the tag, try this if it works for you

Check this demo here Fiddle

HTML

<div id="wrapper">
<div id="header">
<p>Pavel Design</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus     imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.</p>
</div>
</div>
</div>

<footer>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="mailto:info@pavel.co.nz">info@pavel.co.nz</a></li>
        </ul>
    <p>© Pavel Design 2016  |  Photography, design and website construction by Pavel Design 2016</p>
    </footer>

CSS

 #wrapper {
    display: block;
    position: fixed;
    text-align: center;
    min-height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#header p {
    font-size: 2em;
    margin: 0;
}

#header ul {
    list-style-type: none;
}

#header ul li {
    display: inline;
    padding: 20px 20px;
    font-size: 1.5em;
    margin: 0 30px;

}
footer {
  position: fixed;
  margin-top: 2%;
  height: 50 width: 100%;
  text-align: center;
  font-size: 0.8em;
  bottom: 0;
}
footer ul {
  list-style-type: none;
}
footer ul li {
  display: inline;
  margin: 0 15px;
}
Comments