Footer

I've been trying to make footer stick to bottom. (When the content of the page isn't too long it would be in the middle of the page)

But I can't come with a solution which would work both when the content is smaller than the whole display and when the content doesn't fit the display.

I've tried google search, but that doesn't really help.

When I work with percentages, it only takes percentages of the current display, not the whole page. So if it's on the bottom (bottom:0) it works when the content is smaller than a screen, but when it doesn't fit just one screen, the footer is on the bottom of the screen but there's the rest of the content underneath.

Anybody has any simple solution?

/e The same is with width. When I make it 100% it's usually ok, but when you make the screen smaller and you have to scroll to the side, the footer ends on the border of the first displayed content.

lucasgladding said:

This is the approach I use:
http://ryanfait.com/sticky-footer/

Both the html and body tags need to have 100% height. You need a page wrapper (excluding the footer) with a min-height of 100%, and you use negative bottom margins to free space for the footer. The footer doesn't need any special positioning, but it does need to be a fixed height that matches the negative bottom margins on the wrapper.

The additional height declarations aren't necessary in Safari, but they might be needed for others.

Click to expand...

Yeah, I tried this, but it doesn't really work well, at least for me It's too much at the bottom (under the screen)

Maybe it's due to my margins as he also mentiones?

lucasgladding said:

It definitely works. I use it all the time.

The margins would be my guess. Do you have the page online somewhere. I would be happy to take a look

Click to expand...

Uh... not yet, but there's a grid of divs (3 rows x 5 divs) and each row has 30px margin-top.

However I can upload it on a free hosting, I guess the ads on the top shouldn't be problem. It's not optimised for all browsers yet (It works best in latest Safari).

And there are not many settings for the footer since I deleted the mess after trying. I am going to get back to it after finishing some other stuff.

Would you take a look at it if I uploaded it?

/e http://fcecountdown.ic.cz ignore the domain name, it was used for something else

lucasgladding said:

I would be happy to look. Let me know when it's up.

Click to expand...

it is already

lucasgladding said:

I just checked the site, and I don't see the CSS for the sticky footer. I checked the DOM inspector to be sure I wasn't missing something. Are you sure the most recent code is online?

In case it is just a stylesheet that's not being included, you're going to run into problems because there is no main wrapper. For this to work, there can only be two layout blocks inside the body. You need to wrap everything except the footer in one block, and that gets the min-height and the negative margin. The footer is the only other child to the body.

Click to expand...

There is a wrapper, it's called div class="main", and there's everything except the top bar and the footer.

And as I said before, I deleted the sticky footer code and will come back to it later.

/e and yeah, there's is the blue bar with ads on the top, but that won't be there.

It works now, I just had to put some thought and order into it

lucasgladding said:

Glad to hear it. The code looks great.

Click to expand...

But there is still one problem, when I make the window smaller that I have to scroll, there is a white rectangle above the footer which might be the push div or it's caused by the negative margins.

Is there any solution for this? Since the background is gradient from white to gray, it doesn't really look good.

lucasgladding said:

Hexiii

It's actually the default body background-color that you're seeing. The gradient background-image is only as high as the window, so anything beyond the window height is going to be the background-color. Personally, I would resolve the issue by adding a background-color before the background-image gradient. Use the second color from the gradient for the color, and things should be seamless.

Let me know if that doesn't make sense. If you specify a background-color, you should see what I mean right away.

Kind regards

Lucas

Click to expand...

Ah thank you. I'll definitely try that.

Maybe it might work If I made a stripe of a png gradient and then repeat-x.

/e Worked great, thank you very much