CSS Madness

[kossae9000]

Hey everyone. I am having a terrible time with CSS at the moment and I can't figure what's going on. I am using wordpress to develop my site, and I am editing the footer part of the modules. Anyway here is the URL:

Buddy Gregg Motor Homes | Knoxville Tennessee's Premier Motor Home Dealer

If you will notice down at the bottom, there is whitespace. Why? I have no idea. If you look at the CSS via firebug or viewing source you will notice I have a footer div, left and right parts, and then a class to push the image to the right. I have no idea how this class is expanding beyond its parent div. I'm sure this is some sort of small overlook, but if someone could help me fix this that would be great. Don't mind the messy code please, I'm workin on it lol. Thanks everyone in advance.

[Force Flow]

You applied a background image to the body, and it doesn't stretch or repeat.

The image would need to be bigger or scaled.

Some scaling techniques here: Perfect Full Page Background*Image | CSS-Tricks

[kossae9000]

You mean the gradient part? I want the footer to pull down to the bottom over the whitespace, not the part of the body background. It's something in the divs, because if i take away the padding everything looks fine but my image and text are moved up past my repeating footer image (with the slight drop shadow top border). However, when i try to make a new "Manufacturers" image to compensate for the extra pixels, it decides to do the same thing.

[Force Flow]

Oh, I think I see what you're getting at.

Try this technique: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

[kossae9000]

Well oddly enough I tried those steps earlier and it didn't work as expected, though it helped me keep my footer down at the bottom (not so much "sticking" with the scrolling of the page). I kind of like it how it is, I just don't understand why that stupid white space is there. Upon inspection its the "floatright" class that's somehow extending down or something. Idk.

[Paul O'B]

Hi,

I didn't see any whitespace but you have made some mistakes in the sticky footer. See the css faq (in my sig) for a full rundown on how the sticky footer works. (Note that the site Force Flow linked to above is using most of my code but not the latest version.)

You have dragged the sticky footer up by 100px which means it will overlap content by 100px so you have to soak the space up somehow. Without changing all your code you could do something like this:

#main{padding-bottom:100px}
#colophon {overflow: hidden;}

Note that you have given your footer a height of 100px and then in the very next rule you have placed another element that is 100px and has 6px top padding! How can that fit? You must make sure everything fits and the footer needs to be an exact height for the sticky footer technique to work. Remember the height will also include any margins on inner elements also so make sure you set the bottom margins of any p elements or headings to zero in the footer.

The css faq contains the full details and newest version for all browsers so check there if you need some clarification.

[kossae9000]

Thanks both of you for all your help! I'll get on this first thing back in the office.