CODEWITHSUNDEEP
htmlcss
user2959896
user2959896

Reputation:

How to create a footer in html document

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.

Upvotes: 1

Views: 30872

Answers (4)

JustHannah
JustHannah

Reputation: 23

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.

Upvotes: 2

Ani
Ani

Reputation: 4523

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/

Upvotes: 2

2kreate
2kreate

Reputation: 148

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;
}

Upvotes: 0

Kuzgun
Kuzgun

Reputation: 4737

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

Upvotes: 0

Related Questions