Footer problem (footer too low on page)

[Totoro]

Hi,

I’m having some problems with a sticky footer. i know there are several posts about footer problems, but I’m having kinda different problem. The footer is pushed down the page and there’s always a scroll bar even when there is almost no content on the page. I just want to have a margin of x pixels from the content to the footer if everything fits within the window.
I know that most people have problems pushing the footer down without a blank white space beneath it, but my problem is that the footer is pushed too far and you always have to scroll no matter what.
Does anybody know what’s wrong with my code. Appreciate any help. Thanks!

You can have a look here: http://www.orientouch-e.com/test/

Here is part of my CSS:

Code:

* { margin: 0; padding:0; }

/* Main ————————————————————- */
html, body {
font-family: “Lucida Sans”, Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}

/* Header ————————————————————- */
#header {
background-color: #efefef;
color: #f0f0f0;
margin: 0;
margin-top: -30px; /* 0 original */
height: 175px;
border-bottom: 6px;
border-bottom-style: solid;
border-bottom-color: #e31837;
}
#bar {
position: relative;
width: 100%;
height: 30px; /* 40 original */
background-image: url(img/master/headerBlack.gif);
background-repeat: repeat-x;
}

h1 {
width: 314px;
margin-top: 40px; /* 28 original */
float: left;
}

/* Footer ————————————————————- */
#circlesContainer {
right: 0;
margin: 0;
padding: 0;
top: -47px;
position: absolute;
}

#circles {
position: absolute;
padding: 0;
margin: 0;
right: 0;
}

.push {
height: 47px;
}

#mainContent {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -47px;
padding-bottom: 47px;
}

#footer {
position: absolute;
background: #f1f1f1;
border-top: 1px;
border-top-style: solid;
border-top-color: #e4e4e4;
bottom: 0;
width: 100%;
height: 47px;
line-height: 47px;
visibility: visible;
}

#footerText {
width: 940px;
margin: 0 auto;
font-size: 11px;
color: #a5a5a5;
padding: 0;
position: relative;
}

p#footerCopyright {
font-size: 13px;
color: #a5a5a5;
line-height: 3.5em;
left: 0;
margin: 0;
padding: 0;
position: absolute;
}

p#footerCredit {
font-size: 13px;
color: #a5a5a5;
line-height: 3.5em;
right: 0;
margin: 0;
padding: 0;
position: absolute;
}

#footerImage {
right: 0;
line-height: 3.3em;
}

And the html:

Code:

• Home
• Information
• Projects
• Clients
• Contact

Geldersekade 102B
1012 BM Amsterdam, The Netherlands

Telephone +31 (0) 20 – 6240194
Fax +31 (0) 20 – 4286406

General inquiries [email protected]

Copyright Orientouch Entertainment 2006-2009, All rights reserved

Web Design by

[AshtonSanders]

If I’m not mistaken, your problem is here:

Code:

#mainContent {
height:auto !important;
margin:0 auto -47px;
min-height:100%;
padding-bottom:47px;
position:relative;
}

Try changing your margin to:

Code:

margin:-47px auto 0;

I will also note this HTML code is taking up a lot of space:

Code:

[Totoro]

Hi AshtonSanders,

Thanks for your input.
I tried changing the margin but it doesn’t work. The 3 circles in the footer are overlapping my content when the window is too small.
The push class in the HTML is to give the footer an x margin to the content so there’s a bit of white space. In this case 47px; But if you know another way to do that I’d like to know how.

[AshtonSanders]

Try this:

http://ryanfait.com/resources/footer-st … m-of-page/

[Author]

Posts