Comments on: Fixed Header & Footer Layout: A Beginner’s Guide

By: Jarod Taylor

Jarod Taylor — Sat, 04 Jun 2011 00:33:19 +0000

Do you have a URL I can look at?

By: Stephen

Stephen — Sat, 04 Jun 2011 00:23:30 +0000

Hello, thanks for a very detailed step-by-step tutorial. Had my fixed header working fine in FF, but decided to test in IE6. No fixed header. Your tutorial fixed that, however. I have a bit of a problem. The remaining scroll bar doesn’t scroll the entire page up properly.

By: Jarod Taylor

Jarod Taylor — Sat, 12 Feb 2011 04:31:53 +0000

Well, you’re not going to remove the horizontal scrollbar, regardless if it’s a fixed footer or not. That is the nature of the browser’s scrollbar. If you want to remove that scrollbar, you’re going to need to put overflow:hidden on your html/body elements. Which I would not recommend, unless you want to piss your visitors off.

As for the content in the footer not scrolling, that again, is the nature of Fixed positioning. It’s fixed relative to the browser window, not its parent (like Absolute positioning).

By: Peter

Peter — Sat, 12 Feb 2011 01:47:42 +0000

ok, that removes one scrollbar. But now we have another problem – you can scroll main content div, but not footer. so everything beyond your window border is hidden – until you resize it again.

By: Jarod Taylor

Jarod Taylor — Fri, 11 Feb 2011 20:42:00 +0000

It’s probably due to the Firefox fix (for a bug that no longer exists). Just go to the styles for #footer-wrap and remove the overflow: auto.

By: Peter

Peter — Fri, 11 Feb 2011 20:14:10 +0000

Hi, there is a slight issue id like to solve. When you resize your window and make it smaller, two scrollbars appear on top of each other in footer. Also footer background does not continue beyond its initial width…. talking about your demo page, my own code does the same.

By: firma rehberi

firma rehberi — Sun, 21 Nov 2010 01:10:33 +0000

Hi,
I couldn’t organize it with PNG filetype. How can make that work? It looks like overflow on it. I had an issue. I’ll happy if you help me.

Thanks,
Best Regards

By: illona

illona — Mon, 15 Nov 2010 22:46:57 +0000

This is a fantastic tutorial but I’m currently using a theme that puts the header into the content-inner area. Do you have any idea how I would go about disconnecting the header from the content? If you get a chance to look at the site, you’ll notice that I can’t move any of the header/content over to the left to align it. It’s driving me nuts! I’ve tried every combination of margin and padding you could think of! Thank you ahead of time.

By: antivirus 2011

antivirus 2011 — Sat, 25 Sep 2010 21:42:22 +0000

The tutorial is really a detail one. So nice…The position property is quite powerful in CSS indeed.

By: Shahib

Shahib — Sat, 18 Sep 2010 06:37:02 +0000

Hi Dude,

Nice Work. Awesome.

I have tried scrollable functionality for table in my blog.
s7u.blogspot.com/2…er-footer-table.html

Regards,
Shahib