Can't make footer stick to the bottom of the page

Question

smiths-heimann.az is my website. tried all instructions from http://www.cssstickyfooter.com/ But it doesn't work for me (proof that it doesn't work http://smiths-heimann.az/?page=3 ). Please help me to make stick footer to the bottom of the page and remove empty line between 2 divs http://prntscr.com/2e2fp Thx in advance

Answer 1

Your #footer is inside #wrap . The sticky footer code has the footer outside #wrap :

<div id="wrap">
    <div id="main">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>

<div id="footer">
</div>

Edit

Just had a look at your site with the moved footer code. You've got a gap at the bottom which, if you don't want it, can be solved by making the #footer 's height the same as the footer's margin-top , but positive.

Edit to other problem

Inside your header, you have a navigation ul with a few classes: sf-menu , sf-js-enabled and sf-shadow . If you take margin-bottom: 1em off that, the gap is removed.

Edit to non-stretching background problem

This is still quite simple, although it will change the header's transparency a little.

Find the background-image for #container in your CSS file and move it to #wrap . To clarify, #wrap should have this CSS:

#wrap 
{
    min-height: 100%;
    background: url("img/tff.png") 0 0 repeat;
}

And #container should look like this:

#container 
{
    min-width: 980px;
    width: 100%;
    overflow: auto;
    padding-bottom: 110px;
}

Second edit to non-stretching background problem

Ok. Whew. I did it; I removed the scrollbar too.

Make #footer be:

#footer {
    background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border-top: 1px solid #919191;
    clear: both;
    font-size: 10px;
    height: 110px;
    margin-top: -126px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    width: 100%;
}

The scroll bar was appearing because borders and padding add extra height to the footer, so the negative margin was actually too small. I've changed it to -116px . While this works in Firefox, the OP found out it does not work in Chrome . Eventually, an edited image was used to get the functionality required. Only use this answer as a reference.

Now make #wrap this:

#wrap {
    background: url("img/tff.png") repeat scroll 0 0 transparent;
    height: auto;
    margin-top: 100px;
    min-height: 100%;
    position: relative;
}

Finally, make .header this:

.header {
    background-image: url("img/nav/trans.png");
    color: white;
    height: 80px;
    top: -100px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    position: relative
}

Answer 2

 margin-top: -150px;

lose that CSS