1

Before I explain the problem, just let me say that I have searched quite a bit on Google and read several Stack Overflow replies in addition to trying stuff out, it doesn't quite work.

Another HTML footer question, but I don't seem to find the answer to my question even though there seems to be many questions about this; it's either really odd solutions without explanations or solutions that doesn't work if you add for example another form to the site on the same page (footer goes below the layout box border line).

I'm trying to create the footer to have it stick at the end of the document, I've tried the following:

margin-top: 100px

Well that did work until I added more content to the page, the footer is pushed below the layout border line. Then I tried setting the footer as a relative position with position: relative but that just kept the footer on the middle of the page.

My CSS code:

.box {
background-color: white ;
height: 800px ;
width: 600px ;
margin: 0px auto ;
border: 1px solid black ;
}

.header {
    text-align: center ;
    padding-left: 5px ;
}

.navigation {
text-align: center ;
font-size: 16px ;
font-family: verdana ;
}

.content {
font-size: 18px ;
font-family: verdana ;
padding-left: 10px ;
}

.contactForm {
font-size: 16px ;
font-family: verdana ;
}

.footer {
margin-top: 100px ;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}

My HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="testing.css" type="text/css">
</head>
<body bgcolor="#f6f6f6">
    <div class="box">
        <h3 class="header">My blog</h3>
        <hr/>
    <div class="navigation">
        <a href="#">Home</a>
        <a href="#">Posts</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <hr/>
    <div class="content">
        <form class="contactForm" action="#" method="post">
            <table>
                <tr><td>Contact</td></tr>
                <tr><td>Name:</td><td><input type="text" name="name"></td></tr>
                <tr><td>E-mail:</td><td><input type="text" name="email"><td></tr>
                <tr><td>Message:</td><td><input type="textarea" name="message"></td></tr>
                <tr><td><input type="submit" name="submit"></td></tr>
            </table>
        </form>
    </div>
    <div class="footer">
        test
    </div>
</body>
</html>

Nothing seems to work and I got to say I'm starting to get kind of frustrated since I've been reading several guides and articles about this, but a lot of them just says that I have to set the width, height and the position to relative and doesn't show how you position them correctly.

Can someone explain how to create a proper footer? Would be nice if there was an explanation to the code as well.

Adrian Mole
  • 43,040
  • 110
  • 45
  • 72
  • 3
    possible duplicate of [CSS for Fixed Footer](http://stackoverflow.com/questions/13788357/css-for-fixed-footer) – Pat Dobson Dec 03 '13 at 16:10
  • also why i explained in the -first- paragraph the reasonw why i dont think it is –  Dec 03 '13 at 19:13

4 Answers4

2

CSS position:fixed; should do the trick.

.footer{
    position: fixed;
    text-align: center ;
    font-size: 16px ;
    font-family: verdana ;
    width: 600px ;
    height: 50px ;
    background-color: #f6f6f6 ;
}

Fiddle: http://jsfiddle.net/pXBpc/1/

Ani
  • 4,377
  • 4
  • 25
  • 30
  • This works until you add more text on the page which is contained in the box.. if i, as a test, add five more forms the footer is pushed below the border line for the box and so is the forms though..maybe im missing something here..i thought the content height of the box and the border line was suppose to expand to a higher height value when the content reached the footer so i guess this is one way to do it.. but how do i do it so the footer and border line is pushed down when the content is getting close enough to the footer so the forms isnt getting below the border line –  Dec 03 '13 at 19:12
  • Check this : http://jsfiddle.net/pXBpc/2/ No matter how much text you add footer will remain at the bottom. If you r problem still persists, create a fiddle and replicate the problem over there. People are more likely to help you if you create a fiddle link replicating the problem. – Ani Dec 03 '13 at 19:17
  • Just found out how now..if i changed the .box section to have a "position: relative" and removed the height property and then added "position: relative" to the footer it works nicely, the height of the box and the footer adjusts its height automatically..i will read up again on the position property –  Dec 03 '13 at 19:19
2

It looks like you've got an open div to start with, which won't be helping things.

Change:

<div class="box">
<h3 class="header">My blog</h3>
<hr/>

to

<div class="box">
<h3 class="header">My Blog</h3>
</div>

If that doesn't help then you can try wrapping the content in a container. I learned that from this tutorial which I found pretty clear.

JustHannah
  • 23
  • 2
  • The open div is the container element for the rest of the elements, ill check out the tutorial though –  Dec 03 '13 at 19:08
  • It doesn't appear to ever be closed though. As far as I can see there are 4
    tags and only 3
    tags.     – JustHannah Dec 03 '13 at 22:03
0
.footer {
position:fixed;
bottom:0;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}
Kuzgun
  • 4,512
  • 4
  • 33
  • 48
  • This doesnt work with the height of the box, the box has a solid black border around it and the footer is placed way below that border line..it doesnt look like i can post a picture of it here but it doesnt work as expected –  Dec 03 '13 at 19:08
0

Use the following code to fix the footer to the bottom of your page:

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:50px;
   width:100%;//or 600 pixels if you don't want it to fill the bottom of the page
   background:#999;
}
2kreate
  • 148
  • 1
  • 10