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

By: TG Developer » 47 CSS Tips & Tricks To Take Your Site To The Next Level

TG Developer » 47 CSS Tips & Tricks To Take Your Site To The Next Level — Mon, 15 Mar 2010 16:45:12 +0000

[...] you can try are creating a scrollable table with a fixed header within your page or keeping both header and footer fixed while allowing your content to scroll between [...]

By: George

George — Sat, 13 Feb 2010 09:23:54 +0000

I would also like to start by saying thank you for a really good tutorial.

I am having a problem that my content, which is an iframe with a src to another site, sits on top of my header. I have tried using normal html content and that works fine. But the minute I try to use iframes, then the fixed header goes to behind my content.

Any suggestions?

By: Rich

Rich — Wed, 10 Feb 2010 17:27:43 +0000

awesome. thanks so much!

By: Jarod Taylor

Jarod Taylor — Wed, 10 Feb 2010 14:06:39 +0000

Rich, I took a look at your layout. The reason you’re getting your scrollbars in the header and footer, are due to the images you’re using. Even though you’re declaring a height of 170px in the header-wrap, the image remains an inline element. You’ll also notice that your header, and footer, are not aligning up properly with the rest of your layout (at least in Firefox 3.5.7 on Mac OS X). To fix both the alignment issue AND remove the scrollbars, you need to add this to your stylesheet.


#header img, #footer img
{
display: block;
}

Hope this helps.

Thanks,

Jarod

By: Rich

Rich — Tue, 09 Feb 2010 18:00:14 +0000

p.s. http://www.smoothentertainment.com (that’s where the problem lies)

By: Rich

Rich — Tue, 09 Feb 2010 17:22:41 +0000

First off, amazing tutorial! Very helpful!

Quick question: when i do the “overflow:auto” work around for the Firefox 3.5 bug, I get scrollbars in my header and footer, even though the containers are set to the exact dimensions of my header/footer images. I’m admittedly pretty new to CSS, so any help would be greatly appreciated.

By: Muhammad Hafiz Bin Hussin

Muhammad Hafiz Bin Hussin — Fri, 29 Jan 2010 10:28:34 +0000

guys, I am still having problem with the header when browsing through I E 8..
but, it is ok when I browse using Google Chrome..
man, I am dizzy right now (@_@)

By: Muhammad Hafiz Bin Hussin

Muhammad Hafiz Bin Hussin — Fri, 29 Jan 2010 07:52:53 +0000

This is a good tutorial ever!

But, I am new in css. Some terms and some parts of the tutorial I am not able to understand.(T_T)

By: april_mary

april_mary — Thu, 17 Dec 2009 13:03:20 +0000

Thanks a lot!
Very useful guide!

By: Mitternacht

Mitternacht — Sun, 06 Dec 2009 02:02:23 +0000

Fixed my flash problem with wmode=”opaque” works in firefox, chrom, Internet explorer, and safari. Haven’t tested other browsers.