CODEWITHSUNDEEP
htmlcssfooter
heyred
heyred

Reputation: 2051

HTML CSS footer

How do I push a footer to the bottom of my page? Here is an example of what I currently have: hansmoolman.com As you can see the footer is pushed underneath my 2 left and right containers. How can I fix this. I have used relative positioning for some elements as the red banner had to be pushed over the header bar and given a + z-index. I found some solutions online to stick the footer to the bottom but this does not solve my problem as the footer still appears aver my 2 columns if the content in them is not big enough to fill the whole page.

So what I want is for the footer to always follow BELOW all the rest of the content (the sticking to the bottom I can solve later).

There is a bit of CSS code so havent added it here, but can add it if needed

Upvotes: 0

Views: 2031

Answers (3)

ygssoni
ygssoni

Reputation: 7359

To align the contents right. You have to make some changes in your css.

First of all remove :

top: -200px;
width: 100%;
z-index: -1;

From your #footer .

And change your #mainContentContainer to :

#mainContentContainer
{
    min-height: 400px;
    overflow: auto;
    position: relative;
    width: 100%;
}

Upvotes: 1

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

Your CSS Looks Like:

#footer {
    background-color: #FFFEF0;
    border: 1px solid #000000;
    clear: both;
    height: auto;
    margin-top: -100px; /* >> Remove This*/
    overflow: hidden;
    position: relative;
    top: -200px; /* >> Remove This*/
    width: 100%;
    z-index: -1;
}

Remove following css rules from #footer 

top: -200px; 
margin-top: -100px;

Upvotes: 2

Sed
Sed

Reputation: 6431

Try clear:both for your footer container tag, considering it has display:block; set

Upvotes: 1

Related Questions