CODEWITHSUNDEEP
htmlcss
Alex Kittavong
Alex Kittavong

Reputation: 193

Footer sticking to the bottom issue

I've tried ways to make this work. Mainly been trying this solution.

That didn't work out for me. The issue I do see is that in my body html css, I do have the height set up 100%, but its not really setting it to 100%.

Here is my css code for my footer and body, html:

body {
font-family: 'AG-Regular', Helvetica, Arial, sans-serif;
margin: 0;
min-width: 1058px;
}

body, html {
height:100% !important;
}

#footerBox {
    width: 100%;
height:218px;
background-image:url(/img/footer-bg.png);
background-attachment:scroll;
background-repeat:repeat-x;
}

Here is a link to the site.

You should see where it's messed up at. Any help would be appreciative. Thanks.

Upvotes: 0

Views: 78

Answers (2)

Colin Bacon
Colin Bacon

Reputation: 15609

To get the header and footer to stick you need to use position: fixed on both.

Example Code

Header

#headerBox
{
    position: fixed;
    height: 200px;
    left: 0;
    top: 0;
    width: 100%;
}

Main

#mainBox
{
    overflow: auto;
}

Footer

#footerBox
{
     postion: fixed;
     height: 218px;
     width: 100%;
     bottom: 0;
     left: 0;
}

Upvotes: 1

gaynorvader
gaynorvader

Reputation: 2657

Main problem was the -218px margin-bottom in #maincontent. Make this 218px so that your footer is pushed down. I set your footer to always be on the bottom of the page using position: fixed, not sure if this is what you wanted or not.

#footerBox {
width: 100%;
height: 218px;
background-image: url(/img/footer-bg.png);
background-attachment: scroll;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
}
#mainBox #mainContent {
background-color: white;
margin: 185px auto 218px;
overflow: auto;
padding: 30px 20px 20px;
width: 958px;
}

Upvotes: 0

Related Questions