CODEWITHSUNDEEP
htmlcss
Doug Smith
Doug Smith

Reputation: 29316

Why is my footer overlapping the content at the bottom of my page?

Website in question: christianselig.com

At the bottom of the page I have a message that says "Like what you see? We should talk." But for some reason, unlike on any of the other pages, this one is overlapped by the footer.

CSS:

.message {
    margin: 150px 0;
    text-align: center;
}

HTML: 

            <div class="message">
                <span class="first-part">Like what you see?</span>
                <span class="second-part"><a href="contact.html">We should talk.</a></span>
            </div>

            <div class="footer-wrapper">
                <div class="footer">
                    <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="#work" class="scroll">Work</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>

As you can see, I thought I gave the .message CSS 150px of top and bottom margin, but it doesn't seem to be kicking in at the bottom. I can give it padding, but that doesn't seem to be a proper solution, as I don't want the element to span that much room, I just want it to push the other stuff down.

Potential understanding: Margins push it away from content, but there has to be content there. As it's the last element on the page, it has nothing to push away from, so padding would be necessary? Is there a better way if this is true?

Upvotes: 3

Views: 1998

Answers (4)

Luca
Luca

Reputation: 9705

remove position: absolute; from your div.footer-wrapper and then tweak the margin on your div.message

.footer-wrapper {
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #D6D6D6 100%) repeat scroll 0 0 transparent;
    border-top: 1px solid #CCCCCC;
    bottom: 0;
    height: 16px;
    overflow: hidden;
    padding: 8px 0 5px;
    width: 100%;
}

you do not need padding on .message, the mistake here is absolute positioning the .footer-wrapper div without need (as far as I can see?)

EDIT: as mentioned in another answer, clearing is a bit messy. adding 

.wrapper {
    padding-bottom: 1px;
}

seems to help if you want a quick fix but a proper clearing would be way better.

also, you may want to add a doctype to the top of your page, like:

<!doctype html>

as your website renders in quirks mode in IE with more display errors.

Upvotes: 0

Bogdan Rybak
Bogdan Rybak

Reputation: 2117

Everything's a little broken because you did not clear the float on your .personal-info

You can use this clearfix

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

and then apply it to <div class="personal-info cf">

Also, it's better to use a sticky footer instead of position absolute. As yckart said, padding is a good way to do this too.

Upvotes: 1

Krycke
Krycke

Reputation: 3186

It's because your footer is absolute positioned at the bottom, placed over whatever happened to be there.

Just add a padding of like 50px to the bottom of .message and if will make an extra space under it.

.message {
    margin: 150px 0;
    padding-bottom: 50px;
    text-align: center;
}

Upvotes: 0

yckart
yckart

Reputation: 33378

Padding works great for me:

.message {
    padding: 150px 0;
    text-align: center;
}

http://fiddle.jshell.net/3EYdq/2/show/

Upvotes: 2

Related Questions