CODEWITHSUNDEEP
htmlcssfootersticky-footer
Tural Ali
Tural Ali

Reputation: 23240

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

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

Upvotes: 1

Views: 602

Answers (2)

Murali VP
Murali VP

Reputation: 6417

 margin-top: -150px;

lose that CSS

Upvotes: 0

Bojangles
Bojangles

Reputation: 101473

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
}

Upvotes: 2

Related Questions