CODEWITHSUNDEEP
htmlcssfooter
Unique
Unique

Reputation: 55

CSS/HTML - Footer will not stay at the bottom of the page

I have been searching all around for solutions as this is a common problem. All the 'solutions' that has worked for others has not worked for me :(

This is the body of my index.html file:

<body>
        <div id="header">
        <table width="100%" height="auto" border="0">   
    <tr>
        <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
        <td><div id="navigation">
            <ul>
                <a href="#"><li>HOME</li></a>
                <a href="#"><li>FORUM</li></a>
                <a href="#"><li>NEWS</li></a>
                <a href="#"><li>INFORMATION</li></a>
                <a href="#"><li>GALLERY</li></a>
                <a href="#"><li>STAFF APPLICATIONS</li></a>
                <a href="#"><li>CONTACT US</li></a>
            </ul>
        </div></td></tr></table>
    </div>
    <div id="announcement">
        <center>
        <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
        </center>
    </div>
    <div id="slider">
        <center>
        <h1>IMAGE SLIDER COMING SOON</h1>
        </center>
    </div>
    <div id="featured">
    <table width="100%" height="100%" border="0">
        <center>
        <tr>
        <!-- Column 1 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
            <h3>Our Community, Your Community</h3>
            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
            <a href="#">Register</a>
        </div></td>
        <!-- Column 2 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
            <h3>Virus & Spyware Free</h3>
            <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
            at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
        </div></td>
        <!-- Column 3 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
            <h3>Free Open-Source Projects</h3>
            <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
            are open-sourced which means the source code is available to the public to use however they want as long as they leave
            credits in the project that they created! The projects we create can range between Websites, programs and on special 
            occasions, games.</p>
            <a href="#">Read More</a>
        </div></td>
        </center>
    </div>
    <div id="footer">
    Test
    </div>
</body>

This is the CSS for my footer:

#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;

}

If anyone knows how i can fix this then please say,

Thanks in advanced

Unique

Upvotes: 0

Views: 1737

Answers (4)

Kishan
Kishan

Reputation: 1190

you not close your tag

see Demo after add 

    <html>
<head>
<style>
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
</style>
</head>
<body>
        <div id="header">
        <table width="100%" height="auto" border="0">   
    <tr>
        <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
        <td><div id="navigation">
            <ul>
                <a href="#"><li>HOME</li></a>
                <a href="#"><li>FORUM</li></a>
                <a href="#"><li>NEWS</li></a>
                <a href="#"><li>INFORMATION</li></a>
                <a href="#"><li>GALLERY</li></a>
                <a href="#"><li>STAFF APPLICATIONS</li></a>
                <a href="#"><li>CONTACT US</li></a>
            </ul>
        </div></td></tr></table>
    </div>
    <div id="announcement">
        <center>
        <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
        </center>
    </div>
    <div id="slider">
        <center>
        <h1>IMAGE SLIDER COMING SOON</h1>
        </center>
    </div>
    <div id="featured">
    <table width="100%" height="100%" border="0">
        <center>
        <tr>
        <!-- Column 1 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
            <h3>Our Community, Your Community</h3>
            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
            <a href="#">Register</a>
        </div></td>
        <!-- Column 2 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
            <h3>Virus & Spyware Free</h3>
            <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
            at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
        </div></td>
        <!-- Column 3 -->
        <td align="center" valign="top"><div id="thumbnail">
            <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
            <h3>Free Open-Source Projects</h3>
            <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
            are open-sourced which means the source code is available to the public to use however they want as long as they leave
            credits in the project that they created! The projects we create can range between Websites, programs and on special 
            occasions, games.</p>
            <a href="#">Read More</a>
        </div></td>
        </center>
        </table>
    </div>
    <div id="footer">
    Test
    </div>
</body>
</html>

Upvotes: 0

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

I have solved your problems. I spent some more hours for you and i get solution for set footer at bottom of page.

Live Working Demo

HTML Code: 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <table width="100%" height="auto" border="0">
            <tr>
                <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
                <td><div id="navigation">
                    <ul>
                        <a href="#"><li>HOME</li></a>
                        <a href="#"><li>FORUM</li></a>
                        <a href="#"><li>NEWS</li></a>
                        <a href="#"><li>INFORMATION</li></a>
                        <a href="#"><li>GALLERY</li></a>
                        <a href="#"><li>STAFF APPLICATIONS</li></a>
                        <a href="#"><li>CONTACT US</li></a>
                    </ul>
                </div></td></tr></table>
    </div>
    <div id="content">
        <div id="announcement">
            <center>
                <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
            </center>
        </div>
        <div id="slider">
            <center>
                <h1>IMAGE SLIDER COMING SOON</h1>
            </center>
        </div>
        <div id="featured">
            <table width="100%" height="100%" border="0">
                <center>
                    <tr>
                        <!-- Column 1 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
                            <h3>Our Community, Your Community</h3>
                            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
                            <a href="#">Register</a>
                        </div></td>
                        <!-- Column 2 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
                            <h3>Virus & Spyware Free</h3>
                            <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
                                at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
                        </div></td>
                        <!-- Column 3 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
                            <h3>Free Open-Source Projects</h3>
                            <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
                                are open-sourced which means the source code is available to the public to use however they want as long as they leave
                                credits in the project that they created! The projects we create can range between Websites, programs and on special
                                occasions, games.</p>
                            <a href="#">Read More</a>
                        </div></td>
                </center>
        </div>
    </div>
    <div id="footer">
    This is footer Section
    </div>
</div>
</body>
</html>

CSS Code:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:white;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:red;
    color:white;
}

Result:

Result

Upvotes: 2

Vikas Vicky
Vikas Vicky

Reputation: 57

To know about positioning visit http://www.w3schools.com/css/css_positioning.asp

I ran your code and the relative positioning is working fine on my chrome browser. Please set the position of the elements of your body of the page so that its relative.

1.Change your css code as 

#footer {
clear: both;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
position:relative; //or any of the other positions as per your page
}

2.One more thing you can do as i did is to set your footer styles as an inline styling like so

<div style="clear:both;z-index:10; height:3em; margin-top:-3em; background-color:red; position:relative;">
Test
</div>

3.If inline styling doesnt work go for internal style set the styles for the footer in a style tag embedded in the head tag

4.You need to keep your div tag outside the main div tag. keep it as a separate element rather than being a child of another element. I have faced similar problems while working with my projects and changing the tag position and the structure of the body helps. You just need to have patience and keep on trying different methods.

Upvotes: 1

HB77
HB77

Reputation: 35

I am not sure what you are looking to do. Are you looking for the footer to be permentaly immovable at the bottom of the page, so that when the rest of the page scrolls it doesn't? Or are you looking to keep the footer under the table, and it scrolls with the rest of the site?

If you are looking for the former, you need to change "relative" to "absolute" and make sure your left, right and bottom margins are set to 0.

If you just want the footer to stay under the table, the rest of the code is needed to see how it's interacting with the other elements and their css styles.

Upvotes: 1

Related Questions