Mobile Friendly Website


Doing it with style

New fixed layout COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Hi, I was playing with this in firefox since you said it was bugged :) I notice it also has problems with pageup/pagedown and the arrow keys...

Keep up the good work. Your site has been a major source of inspiration and motivation for me.
(22.04.2005, 01:08)

I use Firefox 1.0.3 and the mousewheel works fine. The mouse has to be positioned in the frame user want to scroll. As for the PgUp/PgDn and arrow keys: The browser probably doesn't know whitch part of document user want to scroll.
As for IE 6.0 - the mousewheel doesn't work either - move the mouse over the menu and the schrolling will stop. the keys don't work either.
Another "problem": position:absolute div if too big in IE (1024/768) and covers the text about FF.
Great site and a good source of new ideas tof better, nicer and more flexible pages! Keep on the good work.
(22.04.2005, 06:29)

A small javascript work around for firefox:

- look for a named anchor with "content" as name.
- sets the focus on this anchor
- call this on page load...
function pageFocus(){
var contents = document.getElementsByName("content");
for(var i=0; i<contents.length; i++){
var content = contents.item(i);
(22.04.2005, 06:52)

@madhaha, you are right, FF has a problem with the usual keyboard controls. This is also a known bug.
@omci, I'm using FF 1.0.3 and the mousewheel does not work on ANY part of the screen.
IE6 the mousewheel does work on the page content but will stop when on the 'fixed' areas of the screen (the header/footer/navigation) which will obviously not scroll.
@oleastre, nice idea but javascript is not allowed on my web site. Others can use this method if they wish though ;o)
(22.04.2005, 07:57)

I will refine this layout a little to make it look a bit more 'professional'.
(22.04.2005, 07:58)

If you use FF with extension smooth wheel the scrolling will work. I had this ex. installed and therefore did not notice that it does not work without it. when i tried another browser without this ex. it did not.
About my previous comment on IE: the page does automatically set text-size on largest... when set to medium the page returns to normal.
(22.04.2005, 11:12)

Ok omci, I didn't realise there was an extension to enable mousewheel scrolling, thanks I will look into this.
(22.04.2005, 11:21)

Todd (
Stu: On Mac, Safari (1.3) and FireFox (1.0.3) work great, although no page down/arrow key functions (as noted above for Windows). IE 5.0.2 fails miserably...not even a scroll bar to the right at all!! Bill really needs to get standards compliant!!!!!
(22.04.2005, 18:19)

Mark (dk):-
on this: Mozilla/5.0 (Windows; U; Windows NT 5.1; da-DK; rv:1.7.5) Gecko/20041118 Firefox/1.0

The content scrolls under the footer. The footer is placed about threequarters of the way down the screen :-(

I'll test a bit more when I get home. Sorry to bear bad tidings.
(25.04.2005, 23:53)

Mark, very odd. The footer is placed at the bottom using position absolute. To be anywhere else must mean that the body is not 100% high. Or maybe it requirs the <html> tag to be styled 100% high. But then FF1.0 is an 'old' browser and it works well in FF1.0.3 ;o)
(26.04.2005, 08:18)

BTW if anyone IS browsing with FF1.0 then I would seriously recommend that they upgrade to 1.0.3 as there have been many security fixes added.
(26.04.2005, 09:04)

IE 5.2.3 for OS X - the footer appears directly beneath the header obscuring the headline in the content area. No scroll bars, no way to view the page content without expanding the browser window massively.

Last I heard for some reason Mac IE is STILL the most popular browser on OSX. Does anyone know if that's still the case? The inconsistency between IE PC and IE Mac is why I just refuse to use hacks. I can't be bothered writing code for multiple browsers so I stick to using the parts of CSS that do work consistently.
(26.04.2005, 16:30)

Lee, IE5 on a Mac seems to be very bug ridden. Not owning a Mac also makes it very difficult to find a hack for this browser. If IE5 cannot even get a position absolute footer at the bottom of the screen then there is little hope for it getting any of this layout correct.
(26.04.2005, 16:42)

Mark (dk):-

Thanks - I have to test in alway(s) latest version minus one. I'll try to get time to do that over the next day or two and will get back to you. I'll mess a little with the code also. Many thanks for your speedy response.

Kind regards

PS: I took a screen shot if you want I'll cheerfully send it on to you.
(26.04.2005, 20:06)

Mark, ok. I would like to see a screen shot. But without FF1.0 I cannot do any testing. My email address as always is stu(at)
(26.04.2005, 20:53)

Mark (dk):-
Will do. Oops before I stagger off to bed you might like to update your link to the tutorial:

Link as it now is the dreaded "page not found"

[Leaving now for visit to land of nod giving thanks that I'm NOT the only one ..... g'night :-) ]
(26.04.2005, 23:12)

Link should now be ok. Hope the article is of use.
(27.04.2005, 08:07)

Mark (dk):-
I tried a few things this weekend without success. But alas no luck not finished yet though so I promise I'll keep you posted.
(09.05.2005, 01:11)

Here are some screenshots from Mac browsers and a couple of others: public.aspx?proj_id=162897
(14.05.2005, 09:27)

Larry Woods:-
I'm coming in late on reading your article. Implemented it with no problems, but I want to use your technique for a "long-narrow" page (600 wide x 100 % high) that will be centered on the screen.

Any thoughts? Particularly about the IE implementation.
(30.05.2005, 18:30)

Larry, if you want a narrow one check out the 'fixed layout version one'.
(30.05.2005, 20:12)

Stu, on firefox 1.0.4 and Netscape 7.1, the scroll bar of the container does'nt touch the header (there's a gap of 2px). It comes from the header (height 114px + border-bottom 4px = 118px). The container starts at 120 px. I fixed it by replacing 114px by 116px. Does'nt mess with IE6 and don't know for others. Could have fixe it by setting the header size at 118px, but it leads to more modifications.
(31.05.2005, 21:07)

Stu, I looked at Paul's screenshots and the gap seems to be there for Mozilla 1.6, Netscape 7.0, safari 1.2 on Mac OS 10.3 And also for Netscape 6.2 for NT2000.
(31.05.2005, 21:19)

Stu, there's a problem when the third column is longer than the others, the text wrap to the firs t or second column. It can be fixed by : .columnthree {width:31%; float:right; text-align:justify; border:1px solid #fff;}

The fix works on Netscape 7.1, IE6 et FF 1.0.4
(07.06.2005, 21:05)

Thanks smurfCrusher, but this was to demonstrate the fixed layout not the three column text. But if anyone wants to use the three column text as well then perhaps they should note this fix.
(07.06.2005, 21:47)

Hi ! What for a wonderful code ! I'm just beginning to create a website using it. But, I wonder how to extend the "frame" behavior to left AND right frames. I need a content in the middle of my page to be able to scroll and don't want the scrollbar to be on the righmost position of my browser. Setting 'overflow' property to 'scroll' makes the content to act wrong.
Any suggestion ?
(14.06.2005, 15:15)

GeeBee, I think you want to use my 'back to Basic' layout where you can have the content positioned in the middle of the page with it's own scroll bar.
(14.06.2005, 20:41)

cliff rogers:-
Stu, I came across your frameless look using style sheets and I am converting it to work for my new site design. I really like everything so far as far as the layour goes but I have run into one problem. In the header there are 2 images with one of them set to float right. Below them, but centered left to right are several links to other pages. My question is this: How can I get these links to be between the 2 images instead of below them. I placed them above the images in the code and this puts them just above the images but not between them.
Again I thank you for the ideas and the code to work from. I will look back here for any answers someone might post. Later, Cliff
(15.06.2005, 04:16)

Richard V:-
Firstly, Great work! I've found this an invaluable source for learning CSS! I've tried adapting your css for a FIXED height container (for sites that might want a kind of centralized rectangle look), but I have had limited success in IE for Windows and Netscape. Everything looks hunkey dorey in Gecko Browsers but IE offsets the container div to the left, Netscape refuses to recognise that the background attachment is fixed and offsets the container div as well. I don't pretend to know much of what I am doing but do you have any suggestions for sorting these little problems? the url is:

Many Thanks
(17.06.2005, 12:42)

Richard V, you could try adding * html {height:100%; overflow:hidden;} to get rid of the second scroll bar.
(20.06.2005, 16:23)

Richard V:-
Thanks Stu, I'll try that. On a different note:

I'm a mac-centric guy and I have managed to get this layout to work in IE Mac (unfortunately it is still a popular browser for our OS) without damaging use in other browsers (a bit of a slash-n-hack, but I got there!) I was wondering if you would be interested in seeing the code? Where would I send an email to?
(21.06.2005, 12:57)

Richard V, I can be contacted on stu(at)
(22.06.2005, 12:33)
FF scrolling *sort of* works if you use a little trick... click and hold down the button on a link, but instead of letting go and following the link, drag the mouse off THEN let go of the mouse button. a scroll wheel will work when the "focus" is on a link contained in the layer that scrolls. i know it's annoying that it's not fixed yet, but at least we know the functionality is there...
(27.06.2005, 20:52)

First of all, thanks very much for sharing this. It saved my day! To the comment above regarding the javascript fix for Firefox. I don't understand how to do this. Would someone be able to help tell me what to do here? I need to make an anchor link and then post this script in my header? Thank you!
(12.07.2005, 20:21)

Well, I just looked with Fx 1.5 b2 on winxp without smooth wheel, and it seems to scroll alright...
Cannot yet verify if this is an extension I use...
(19.11.2005, 14:10)

insites, FF v1.5 beta has fixed the mousewheel problem (its now RC BTW)
(19.11.2005, 14:29)

Hi Stu. Fantastic work. Really like the look of it. What I'm wondering is do you think it would be possible to write the css not using hacks, and using conditional comments instead. I'm concerned about hacks breaking things in IE7 when it comes out and would be more interested in using conditional comments if possible.

If you've already got an answer great, but if you havent tried it i'll just play around with it and see if i can get it to work.

cheers. amazing site. really been an intriguing browse for me for the last year.
(22.11.2005, 21:06)

Alex it is always possible to use conditional comments in place of hacks. The easiest way is to have a separate IE style sheet containing the 'hacks' and load that using conditional comments. The hacks do not need to have the the * html etc. You can also target IE5.01, IE5.5 and IE6 with their own style sheet if necessary.
(22.11.2005, 22:07)

Cool. I should have thought of that really. Nice and easy solution too - and doesnt affect the end user page load time.

sweet. cheers dude.
(24.11.2005, 06:40)

I think the concept is great and am considering using this on design on my site redesign; however, I've come across one major problem -- printing. Both in FF and IE, printing only prints the first page of the container text. Your Back to Basics (I & II) will print correctly.
(30.11.2005, 14:13)

I really like this site very much!Thank you!
(03.12.2005, 17:07)

Kurt, You will need to create a print.css file to style the printout as you would like it to be.
(08.12.2005, 11:07)

pretty much works for FF1.5 on rh9 linux except that the absolute position box scrolls with the text.
(12.12.2005, 01:00)

Your site is great. I just happened to have a moment
to surf the net and came across it.
Thanks 4 the good informations
I have found on your site. Many Greetings!
(14.12.2005, 05:53)

I enjoyed the time i spent on your
website, thank you very much for that.
(14.12.2005, 09:57)

Well done, this site is really great. Just wanted to say hello, keep up the good work!
(15.12.2005, 01:32)

Very Good Site. Best regards!
(20.12.2005, 17:04)

Hello, a really interesting experience to visit your website.
(21.12.2005, 17:55)

Incredible job on this! I love I love I love this site!
I have address to your site from my friend.
My friends enjoy it as much as I do. Congrats!
That must have been hard to make.
(22.12.2005, 21:01)

The all new fixed layout is great! I like the look of it and the easy to understand implementation. I basically only have one thing that still is not fully clear. It seems in the third column text always starts one row down, I cant get it to aling at the top as column one & two does. With a image at top it's ok but not with text. Am I doing something wrong ?
(19.01.2006, 22:37)

Very good site!
(21.02.2006, 14:48)

Thanks a lot - no really! It has helped me fix something I've been wrestling with for ages.
(14.03.2006, 12:13)

I love the frame affect, but I can not make it work with IE Mac 5.2.2. I've tried with other designs and as soon as I use the position:fixed attribute then the breaks the links and doesn't function. I've been looking for a work around have found none yet.
(14.03.2006, 21:36)

Hi Stu & thx so much for your helpful, informative site! I've visited many times and always find something new, interesting & fun to learn. I'm using Firefox v. & mouse scrolls perfectly!
Thanx again & cheers from OZ,
(23.04.2006, 11:34)

PS to prior post: should read that the mouseWHEEL functions all work perfectly!
Thanx again & cheers from OZ,
(23.04.2006, 11:36)

Galen Seaman:-
I love your cross-browser fixed layout page. But for me it is incredibly slow. I am using ff1.5.0.4 on linux. I have tried several dozen of your other links and they work really well. What's up with this page?
(21.07.2006, 23:31)

Galen Seaman, it is very fast on ff1.5.0.4 on a windows PC so I don't know why linux would cause problems.
(21.07.2006, 23:35)

I was wondering if I could target my links with this layout into the content section. Is that possible with css frames?
(27.07.2006, 00:41)

Hm.. very very nice and informative!
HI from Russia, Saint Petersburg!
(28.07.2006, 13:52)

Okay, I go to, scroll down to the BOTTOM of the content page (where it says, "A fishing boat") and then click the header link to this comment page. When I click IE's back button, it takes me back to the TOP of the content page (where it says, "THE PLAYGROUND NEWS") rather than the BOTTOM where I left it! For some reason the page position is not "remembered" by the browser in the way pages without fixed positions are. Does anyone know why?
(03.08.2006, 17:18)

You've created an awesome site. Thank you for your contribution to the net!
(16.08.2006, 12:43)

Cheers Stu you have done a very nice layout that is easy to understand. Here is a question for you that you might know. If I insert a form tag between the body and all the div tags (header, container and footer) between the form tag. This cause the container div doesn't overflow anymore for IE but it is fine for firefox. Any idea? Is it because there is a need to specify a style to the form tag?

Thanks again
(04.09.2006, 08:28)

Stu, Thank you for all of your CSS work. I have used a modified version of your fixed layout for my site -- It looks fine in Firefox and IE 6; however, IE7 RC1 is showing an extra scrollbar the full length of the page. I can't seem to find the bug. Is there any way you can help.
(08.09.2006, 21:31)

IE strikes again. Mac IE 5.2 puts the footer up high, against the bottom of the header. There is no scroll capability on that browser either. It does work nicely in Mac Firefox Any thoughts on a work around?
(15.09.2006, 08:51)

Nicki, I am afraid that Mac IE5.2 is not up to this one and cannot be made to conform.
(15.09.2006, 16:51)


Try putting overflow: auto style on the body tag.
(26.09.2006, 02:21)


Thank you for the suggestion; however, overflow:auto in the body tag still leaves the scroll bar has no effect on the problem.
(27.09.2006, 22:04)

Kurt, my version works ok in IE7 RC1.
The body tag needs overflow:hidden;
IE7 RC1 looks as though it is putting a horizontal scroll bar and with it a vertical greyed out scroll bar which maybe an overflow of the <html> tag.
You could try styling the html with:
html {
/* hide overflow:hidden from IE5/Mac */
/* */
overflow: hidden;
/* */ }
(27.09.2006, 23:12)

Stu, Thank you!!!
Styling the html tag solved the problem of the extra vertical scroll bar.
I'm still having problems with it placing a horizontal scroll bar at the bottom, but the vertical bar was the main problem.
Thanks again!
(28.09.2006, 14:45)

A truly stunning resource, delivering big time where major software suppliers fail to even acknowledge there is an urgent need for solving these issues.

Thank you Stu!
(31.10.2006, 11:42)

mousewheel: it works correctly in firefox on fc6, but still doesn't in firefox 1.0.8.
(20.11.2006, 10:28)

Hi Stu,

I am finding that column three is wrapping into column two on IE6 when there is not as much text to the left.

One example is visible on the text "A full tutorial on this layout can be found at - article".

Is there a way round this?

Cheers, John.
(21.12.2006, 13:15)

On the "The Playground News" page, I noticed that column three was not quite aligned right. I plaved "float:left;" into the .columnthree class and it worked fine. Beltin Site Stu. PS. I bought your books on the ZXSpecrum all those years ago. It's nice to see you still active in the field. Many thanks.
(29.01.2007, 09:06)

Jeffrey Bollman:-
Good day.

This is great layout for a newsletter.

My difficulty in both FF2 & IE7 is printing the entire body of the page. It appears that both FF2 & IE7 want to truncate the printing at one & only one page.

This means I am unable to print the oriental person and their boat. Even when I scroll down first & then click print preview &/or print, I only receive the top portion of the body, along with the header and the footer.

Any thoughts?

Thank you.
(29.01.2007, 17:59)

Jeffrey, as in your other post, this one will need a separate 'print' stylesheet.
(29.01.2007, 19:26)

Ricardo Mazzi:-
Hi Stu:

I was wondering if you could use uour drop menus on the the fixed Header and Footer layout. I'm working on a layout (with quirks mode of course) but I can't get to work in IE 7.

(06.03.2007, 15:02)

God Of The TalkingMonkeys:-
I just installed the lastest Netscape (version is 8.1.2) and none of the fixed layouts in your layout section will scroll properly. The scrollbar appears and if you drag it manually it will move but it will not scroll from the mouse wheel.

I doubt there's anything to do for it as the layouts all work properly in the other browsers , but there is a bug for the latest version of Netscape it would appear.
(24.03.2007, 01:00)

Tony Thomas:-
For several years (through gritted teeth) I have been studiously ignoring the greyed out scrollbar in IE6. I chanced on your site and your fix when googling for an y new thoughts. Thanks Stu, it does make the IE rendering of my sites more consistent with what Opera and Firefox show.

Now I must sit down and think through exactly why it works!
(01.05.2007, 13:44)

Hi Stu!

This is a great solution. However, I can't see to make it work when using dropdown menus. I can't put the "menu" div inside the "header" div, 'cause when it drops down, it stays behind the "container" div. If a put the "menu" below the "header", it is a complete mess. Can you help me?

(22.05.2007, 21:34)

Bruno, give the header a high z-index.
(22.05.2007, 22:40)


I tried your suggestion. It kind of work in Firefox (the menu options are out of position), but apparently IE has a bug in Z-index. I'm still trying to make it work.
(23.05.2007, 13:37)

Here's a page describing this bug:
(23.05.2007, 13:40)

Hi, I just did it. I put the menu div below the header div, like I had already tried before, but had to do some CSS hacking, 'cause IE had a bug in the footer div.

It is now perfect! Thanks!
(23.05.2007, 14:35)

Hi Stu,

Your seems ideal for my current project i.e. "frame-like" layout (fixed header & footer plus scrolling content).

My question is have you tried CSS Frame Layout using ASP.NET v2.0 Master Pages feature?

Many thanks in advance
(14.08.2007, 12:24)

Hi Stu
Great layout , with so many opinions an how it
should be done it is good to find someone who is
willing to show how it is done. Anyway i thought
i would let you know if no one has already that this page renders perfectly on mac ff v2.0.0.6
and safari v 2.02 which are the latest versions
of the mac browsers
(19.08.2007, 20:07)

Doug, thanks for the feedback. It is always noce to know that this works on Mac browsers. I am saving up for a Mac at the moment, but they are sooo expensive when compared to windows PCs.
(19.08.2007, 20:20)

i love you.
(02.09.2007, 00:29)

The mousewheel (now) works in FF ! Bug fixed :)
(11.09.2007, 10:19)

... at least the mouse scroll. Not the "mouse clic"
(11.09.2007, 13:02)

Is it possible to have IE6 render in standards mode? I love this layout, but I don't want to revert back to using quirks mode, not to mention it messes up other areas of my site
(11.10.2007, 19:43)

Damien, unfortunately not. This method relies upon the faulty box model to work in IE6.
(12.10.2007, 08:35)

Hello Stu,
Great Site!!
I have developed a scrollable table with fixed header which works fine in IE7 but in the case of Firefox 2.0 and Safari 3.0, the header scrolls along with the content.
Thanks in advance ...
(07.01.2008, 11:37)

Hey Stu -

Great site. I didn't see any feedback for the iPhone but wanted to let you know that the scroll bar does not appear in the iPhone's browser.


(15.02.2008, 21:50)

Tom Cassidy:-
Just tested this page in Safari 3.0.4 and it works perfectly!

(06.03.2008, 13:04)

Mario Di Vece:-
Thank you so much for this demonstration. I'm using a cut-down, modded version of your css to produce a file explorer-like application. Of all the attempts to frame emulation, this one is superior and simpler by far.
(06.05.2008, 06:34)

Nice layout, but you can't reload the page in IE7 when zoomed out.
Any suggestions?
(28.07.2008, 14:19)

Michael (big.nerd):-

Thanks for the amazing layout!

I've tested this on MAC w/ FF.2 and FF.3, Opera 9.5, Safari 3.

Your stuff has allowed me to learn so much about CSS. Keep it up!
(19.09.2008, 21:25)

Stu, this site is an extraordinary resource, thank you for allowing all of us to learn so much from you. My question is regarding the fixed navigation on the header. I'm quite a novice at this so the answer may be quite obvious to most others here, but once you click one of the links on the navigation, how do you access and load new content into the scrollbars without reloading the header/footer? I poured over your files but could not see a simple answer. If someone could break that down for me, I'd be forever grateful. :)
(29.10.2008, 06:36)

Silver Knight:-
Firstly, let me echo the sentiments of so many other commenters here and thank you for your fantastically helpful and useful website. It it one of the sites I always end up at when learning new things about CSS.

One small detail about the layout... On the original post Stu said: "Oh...and the mousewheel still doesn't work in FF. It's about time they fixed this bug!"

As far back as I can remember the mouse wheel has always worked in Firefox except for one little detail in layouts like this one. You have to click once inside the area to be scrolled (to make it the active area) before using the wheel. After that one click, the mouse wheel works as normal (until an area outside the scrollable area is selected with another click). Just thought I'd mention this in case it's helpful to anyone. Beyond that little detail though, I do agree that it's indeed a bug and should be fixed properly. Still, it's better than the 900 million bugs in IE that will NEVER be fixed... ;)
(17.02.2009, 18:36)

Jessica Sulliva:-
I browsed the frames demo in FF 3 and IE 7, and it works great. Also, all the steps, even without IE workarounds, render in IE 7.
(04.01.2010, 16:14)

Chris Thwaites:-
Hi There,

Thanks for posting the layout stuff. It is by far and away the best static header/footer, scrolling body CSS code I've seen.

Unfortunately, it doesn't work in an android phone browser (my Nexus 1, to be precise). Any idea why this should be, or any hints as to where I should start looking to get it working?

(25.01.2012, 14:00)

No mobile browser supports position:fixed; at the moment so no layout using this style will work.
(25.01.2012, 14:25)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page