Mobile Friendly Website


Doing it with style


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

Max Glenister:-
that is great :D
(06.03.2004, 23:04)

too cool !!
(12.03.2004, 22:46)

We are not worthy!
(19.03.2004, 15:14)

Groovy, nice 1 Stu!
(24.03.2004, 21:52)

Very nice trick. Well done.
(19.04.2004, 15:09)

sooo nice... just what i was trying to do :D
(20.04.2004, 07:48)

David C Elliott:-
Have you looked at the use of the CSS expression: property in IE? You can use it to make IE behave with fixed layouts as well.
(20.04.2004, 15:15)

Hi David,
CSS expressions use javascript, and this site is for css only.
I could probably also use IE behaviors (css embeded javascript) and Mozilla bindings. Both these work within CSS but are browser dependant and make use of Javascript.
(20.04.2004, 21:07)

I have been looking at your page in NN7.02 and noticed that the text is actually right behind the top border so can't be read? It looks good in IE though.
(21.04.2004, 12:44)

Thanks Rob, I had obviously missed this when updating the files.
However it has now been corrected and works in all browsers as stated.
(21.04.2004, 18:24)

Big John:-
Stu, I'm familiar with the fixed trick for IE, but this application is superb! Check out my much weaker attempt at the same thing:
(23.04.2004, 04:20)

This is great. I have just made my first web site using nothing but css, the problem lies with IE. I sure hope to learn the corect way to do this.
(18.05.2004, 00:07)

(04.06.2004, 08:17)

Stu, your whole site is phenomenal - I'm here constantly. I actually gasped when I caught the cleverness that is "Holy Grill". Very nice.
(18.06.2004, 18:05)

(29.06.2004, 00:58)

I don't know if you still read the comments for this... but I found an interesting problem that I'm having in trying to emulate this. When I scroll all the way to the bottom of the page and then bring the mouse over my menu, it disappears... completely. The banner across the top of the page disappears as well. And they don't reappear when I scroll back to the top. in wordpresstest/ are the following:

Those are the addresses of the code I'm using... I can't give a link to the page because it's an intranet site and not available to the public.
(15.07.2004, 17:10)

Duchess77 > Hi, and yes I do check up on visitor's comments on a regular basis. I have had a quick look at your code and css and cannot see any reason for this effect. As far as I can see you have modified the css to make the whole screen scroll, so it does not follow my page where only the content scrolls. If you could put the page on the internet with a link then I may be able to see what is going on.
(15.07.2004, 19:46)

The page runs off a database, so it's hard to stick it up on a server that doesn't have the database unless I hard code some content in... I'll try it and post back when I get it done. Thanks for your reply!
(20.07.2004, 20:27)

Okay... search.html and index.html should work in that directory with hardcoded content instead of the database stuff.
(20.07.2004, 20:53)

Have a look at the new layout tutorial Basics 2.
This will show you how to set up the html body content and header. Showing how to fix the body size to 100% and add the scroll bars to the content.
(20.07.2004, 21:44)

You can add Safari to the list of browsers that work with this. It looks yummy good.
(27.07.2004, 20:02)

You can add Safari to the list of browsers that work with this. It looks yummy good.
(27.07.2004, 20:03)

I'm sorry I wasn't specific before.

How could I load another html file into the main area of this page? I've tried using an iframe, but I get another scrollbar, which I can't have in my application.

Thanks for the help.
(31.07.2004, 04:03)

@Pickwick - If you change the body scroll to overflow:hidden; then the main body srollbar vanish.
Or specify an iframe height that will not require scrolling (and set scrolling="no").
(31.07.2004, 19:58)

just fine site...
(08.08.2004, 17:00)

Very cool stuff. I keep coming back for more. My work is stuck in old corporate table-based crap but hopefully that will change soon.
(29.08.2004, 21:30)

Luv your work. Great examples and easy english commentary - excellent!
(18.09.2004, 10:28)

Love it! Don't have an application for it yet but I'll be keeping it in mind.

BTW, love your other work too. Have used the photo gallery in a project - it's great!
(22.09.2004, 21:31)

Wonderful work! I'm working with & groovin on the ideas you've put forth, but find blank content when viewed in IE-Mac 5.2. Same result with your file or mine [] Any clues?
(12.11.2004, 03:00)

Unfortunately I do not have access to a Mac so cannot do any testing to see how this could be made to work.
(12.11.2004, 12:02)

This example is sickly VERY slow on FireFox 1.0. (Athlon 2700+ 1 GB RAM) IE renders it nice and fast. WTF?
(13.11.2004, 17:28)

Hey Stu, why not use transparent PNGs above the content for the shadows on The Holy Grill?
(25.11.2004, 05:48)

You could use transparent PNGs but I believe that IE need javascript to make them work. This site is javascript free and I intend to keep it that way.
(25.11.2004, 08:13)

been here ten times in one day now.. very nice!
(10.12.2004, 22:58)

Can some pleae explain the /* */: wintint he css ?
(07.01.2005, 03:38)

These are just hacks for targetting different versions of IE.
(07.01.2005, 19:57)

Stu- nice job on all. I'll be adopting most of it...
(26.01.2005, 21:36)

Stu-Stunning Stuff!
(01.02.2005, 10:01)

This is seriously awesome css work man.
(15.02.2005, 21:39)

Love your work
(17.02.2005, 10:25)

Super--thank you!
(25.02.2005, 19:29)

yeah you're the man. Some sweet code/
(28.02.2005, 07:52)

Hey love the site

having cross browser problems
(03.03.2005, 15:41)

why does scrolling on this page really gets slowed down on firefox?
(03.03.2005, 15:54)

I'm just a beginner and I'm not sure I truly understand it, but I just love the concept of using a bug to fix a bug and so little code!
(04.03.2005, 14:07)

carsten888, I think that the scroll routine in FF is not as good as that in IE. Perhaps they will correct this in the next update.
(04.03.2005, 20:21)

Shimon Young:-
Thanks for the CSS. Ripped it off wholesale for a site.

By way of giving back, I altered the first line of the CSS to...

/* commented backslash hack v2 */
* html {overflow:hidden;}
/* end hack */ make it degrade properly on Mac IE5
(07.03.2005, 15:48)

Stu, The Holy Grail. Great looking site, but got one question. Since this site is based off of the old frames idea, how does new content get loaded in the 'mainframe' or where you have the two columns? I know you do not have sausage, eggs and bacons as links now, but what if you wanted to go to the eggs section, How would the content be loaded? I am assuming that this layout allows the menu and top to stay on the screen as you click through the pages. Thanks and keep up the great work.
(10.03.2005, 13:36)

BP, it doesn't. This layout gives the appearance of a frame layout but that's where the similarity ends.
(10.03.2005, 19:18)

Shimon Young, cheers, I'll give it a try.
(10.03.2005, 19:19)

Erik Poehler:-
sry didnt read all comments, but heres my question:
frameless css-frames is a great idea! i really love to keep headings/navigation while scroling thru my document, but: when i try to put up such a design with a centered, fixed width column, where the header also has a centered background-image i experience this problem: when reducing window-size below that fixed/min-width -of for example 760px- a vertical scrollbar shows up and my wrapped content is accessible :) in opposite to the absolute/fixed positioned parts of the site :( they just dont scroll with the content, which completely destroys the sites layout ... do u have any suggestions how to make a centered,absolutely positioned and/or fixed header become a "vertical-part" of my layout???

maybe theres a easy way to do so...
i've been spending hours over hours on experiments with Roger Johanssons' "Pure CSS Frames" you can find at
although i've got no deep experience in css-coding, i hope there is ONE simple solution to that, heres a screenshot of his template describing my problem:
(21.03.2005, 18:14)

Holy crap-wtf- GREAT PLAYGROUND!!!!
u play lott!
(12.04.2005, 22:18)

Until now I used frames for designing web pages. From now on I will try and use CSS. The pages you put on display here showed me the power of CSS. I thought CSS is only a tool define fonts, tables and other objects have identical design and to help webmaster to easily change them. But with the menus and layouts shown here my understanding of CSS deepened! Super work!
(15.04.2005, 23:21)

Plattdaddy (Steve T):-
I implemented some CSS frames of my own on my portfolio website.
They work well and are not overly complicated. I love the fact that I can have all of the functionality of a frameset with none of the drawback that come with splitting my page into 3 files. Thansk for the tips and tricks, I think I used your source code to help make the damn thing work in netscape. If any one is browsing on a mac with IE please tell me what wrong and how you would fix the problem. THANKS AGAIN!
(19.04.2005, 03:45)

Erik Pöhler:-
the whole window scrolls in firefox (v1.0.3) did you really use fixed? watch stu's sourcecode ^
sorry for my last post (you can delete it pls) - i was just close to giving it all up...
now that i found time to take a closer look to your 'css-frames'-versions i realized that my problem only occurs in fixed width-layouts (overlapping by absolute/fixed positioned parts) so i'll try some fluid percentages-based layouts.
respect for your demonstrations, really appreciate you share knowledge!
ps: your new page-design is worse (in my opinion) the window in the header seems to fall on the following content, feels like its to heavy and too close to the content)
(21.04.2005, 15:30)

Hi Erik, glad you found the answer to your problem, but sorry to read that you don't like the new look. From my point of view it is much better as I have the whole page width to work with for my demonstrations (the previous layout had a side navigation column which sometimes did not leave enough room for the demos).
(21.04.2005, 19:30)

Hi Stu, this layout is pretty cool. I especially like the transparent shadow on the person's hand. One question though, how come you cannot highlight text that is above the hands? For example, you can only highlight text once it has cleared both hands, and you can't highlight text that is under or above the hands. Is there a fix, hack or workaround for this?
(25.04.2005, 16:20)

Hi Zeerus, in FF I can highlight any of the text as long as I start below the hands. This is because the hand graphic extends over the text using a transparent gif, so the browser sees a graphic not text under the mouse.
(25.04.2005, 18:58)

Humph, I will need to do some more testing and figure out what is up with v1.0.3. There also seems to be a big problem on IE Mac: Everything loads exactly where it should, and works fine untill the last second befor it is done loading, at witch point everything (except for some flash) is covered up by a white sheet. Any one have any Ideas?

Oh and thanks for the input, I like the current look better (plus I have invested so much blood, sweat, and brain cells into the layout that, that the red look will likly be in beta forever. I documented my journy towards CSS frames on
look for the CSS frame set link - I dont remember the files name. Its mostly me jabbering about how great they are and what a pain in the ass it is to create and understand CSS frames. I alks list most of the resources I used to help me while I struggeled to create these bad boys.
(25.04.2005, 22:15)

Hi, nice demonstration. I tried a similar one with a fixed footer div by myself. I have troubles concerning the scrolling - firefox tries to scroll the whole page instead of the content-div. so scrolling is only possible by dragging the scrollbar, which isnt really userfriendly. what did i do wrong? cheers, mario
(29.04.2005, 23:56)

Mario, you did nothing wrong. Many of the layouts I have here demonstrate the same problem. This is a FF bug. The Holy Grill layout has a scrolling body so the mousewheel will still work.
(30.04.2005, 08:54)

Very interesting "framed" layout. I wondered if there is a possible layout for gallery pages... It would be very interesting to see graphics on the walls behind velvet ropes...
(09.05.2005, 19:05)
Sei veramente bravo!!!!
(24.05.2005, 15:52)

Beautiful code. After reading through your code, I got it working on my site. The only problem I have currently is that form <selects> are always _above_ the top frame in IE (not in FF 1.0.4), so they scroll over the top while the rest of the page is underneath...

I've tried adjusting the z-index, but it didn't help. Any ideas?
(29.05.2005, 17:44)

Morehart, do you have a url so that I can see exactly what your problem is?
(29.05.2005, 18:23)

Sorry I didn't look here for a while. :) I fixed the problem through some more hacking and squished the main css div frame so it doesn't go under the top at all. I'm suspecting it's just one of those IE bugs. :/

You can view a fixed example page using the new layout at (I just ripped the HTML output from part of my current project.)

But maybe you can help with my new problem, also based off your site. :) In FF, the menu on the left works just fine. In IE, the menu expands, but when you go down to click a link it snaps back up.

By putting a background on the top level links, it appears that the a which is used to expand the menu spots at the beginning of the div. I've tried doing it as a table as well, and I could then get to the links, but only the top row from the table would appear. Any ideas on either one would be great. :) Thanks.
(07.06.2005, 16:42)

Oh, yeah. The collapsable part is off by default, so the fact it doesn't work doesn't affect functionallity, but it would be fun. If I do manage to get it working, I'll probably move the menus over so they expand over the main part, but that's later. :)

And I'm sure you'll love the arrows.
(07.06.2005, 16:47)
Just a quick bravo, because I can. Your trick is great, and the demo page is even better. Merci beaucoup.
(10.06.2005, 11:06)

Looks good pretty, if it scrolls the page in IE5, that's a reasonable way to degrade.
BUT although I know you didn't claim it would work, its completely unviewable (the two main sections overlap) with NN4.7 - which is still (officially) in use at certain large corporations. Probably not the Windows version though. Might be ok with a single scrolling column?
Users of older computers and sight-readers, etc are not likely to be happy.
(15.06.2005, 06:10)

DGE, if this concerns you and you want to cater for NN4+ then this is not the layout for you. As you say, this site is for cutting edge CSS and I only claim that most of it works on the latest browsers.
(15.06.2005, 07:39)

Stu...nice style!
I put the grill in a page of my own and it works fine....BUT when I reduce my screen res to 800x600 the verticle scroll bar disappears in IE (but its fine in FF)...any ideas?
(15.06.2005, 18:49)

Andrew Faulkner:-
Firstly, thank you. I've used your techniques throughout my work as a designer.

I tried to use your 'Frames' trick by adding a nav bar across the top of my site.

It doesn't seem to work in IE - any reason why?
(12.07.2005, 16:26)

graham old:-
Excellent! I love the way the text interacts differently with shadows than the main images.

And it works in MSIE!

Nice one.
(13.07.2005, 11:25)

Conley meyer:-
(13.07.2005, 13:51)

(14.07.2005, 21:58)

The Holy Grill page is great! I love it. I don't know why more developers don't try that kind of fun stuff on their web sites. It's so original. Thanks!
(24.07.2005, 03:26)

hey, dunno if you still check these comments...
soit, erover, i tried it out in opera (7.50) and when using the horizontal scrollbar the content/text will move out into .gif/navigation area wihch is a major just plain ugly

aside from that:
<insert praise/tnx for layout here>
(08.08.2005, 21:42)

Hi Stu! Nice work on the Holy Grill. I'd like to use your position:fixed hack in my webpage but there seems to be a bad interaction between it and the CSS I'm using to style my footnotes. In IE, when I move my mouse over a footnote, my position:fixed div disappears. Can you tell what the problem is? You can see it in action here:
(08.08.2005, 22:14)

whoops, sorry - on the page i gave you, you actually have to click the footnote to make the fixed div disappear...

here's the page with the mouseover problem (though all pages with footnotes seem to have similar disappearing-div issues).

i think it probably has to do with the use of internal links. i'm hoping to find a way to make it work, though!
(08.08.2005, 22:20)

Yes, I check all comments on my site. I remove any that are obviously spam and answer as many as I can.
This is an experimantal layout and cannot be guaranteed to work in all browsers. If you find that it does not work to your requirements then do not use it, or experiment with it to see if you can find a work around (I just put forward the basic idea).
(08.08.2005, 22:52)

Aubli, just had a quick look at your problem and have found that although you have given the * html #menu a position:absolute; you have not given it a position 'value'. Just define the top and left values and it should remain on the screen. I tried left:50px; top:50px; and it appeared to work.
(09.08.2005, 08:18)

hey stu, i wasn't critizing your design. plenty of people like it (just go through all the comments again) and personally i think it's beautifully coded as well as a very useable layout.
i noticed this quirk and thought you would be interested to know this... you're obviously not ;-)

anyway, is there a way of triggering some javascript when content becomes 'visible' in the browser ? say you have more than one 1 article so when the user scrolls down and reaches the next article i'ld like an event to trigger.

any ideas ? (aside from continuously checking pageYOfset etc...)
(09.08.2005, 10:49)

You're right... thanks for catching that, and for getting back to me so quickly!
(09.08.2005, 19:26)

Happy to help ;o)
(09.08.2005, 19:45)

what be this for??
.text {width/* */:/**/44%;width: /**/44%;}
(10.08.2005, 13:20)

Plop, have a look at 'Technique 1' on this for a full explanation. Basically it is a hack for different versions of Internet Explorer.
(11.08.2005, 14:33)

Ron Newman:-
Maybe this is ridiculously obvious, but how do you get a horizontal scrollbar to appear? I'm using
* html {overflow:auto;}

#topper { overflow:hidden; ...etc...

#content {overflow:auto; ... etc...

if I change the #topper overflow to auto it works, but the #content overflow doesn't appear no matter what.
(15.08.2005, 22:17)

Ron, a start point would be to change the body style to body {background:url(menu_body.gif); background-repeat:repeat-y; background-color:#f8f8f8; background-attachment:fixed; margin:0; padding:0; border:0; height:100%; width:100%; overflow:scroll;}
(15.08.2005, 22:38)

Ron Newman:-
OK, I just went back and copied all of your code to make sure nothing was missed. I had cut some of it because I don't really need text in the #content part. With all the code included I have y scrolling only in Mozilla and neither x or y scrolling in IE6. I've played around with the various overflow: tags but haven't got the combination that works.

To be clear, what I'm trying to do is have auto scrolling for the window as a whole, not just the #content area, while still having the #topper fixed. Thanks in advance.

You can see the page at:
(16.08.2005, 03:11)

Ron, just specifying a content width seems to work.
(16.08.2005, 08:04)

Ron Newman:-
Ah, so it does, you Brits are damn good...exactly what I'm looking least in Mozilla. In IE 6.0.2800.1106IC
I get no scrolls at all.

I put a width and height of 1000px in the #content id, set the .text class to width 100%, and made sure the table containing the actual text had a width of 1000.
(16.08.2005, 16:48)

imran khan:-
hi great site. if only i had the patience to understand and impement whats learnt but other than that great reading
(20.08.2005, 19:39)

dean cracknell:-
I've been experiencing similar problems to Ron Newman, namely non-appearance of Scroll-bars. On my page, I have finally tracked this down to and Image where I had set the width to 100%. (It was outside the #content section. Reducing this Image to 90% fixes the problem until the IE-browser width is reduced to about 600px. This effect is also happens in Stu's Tuck-Inn example ... if you manually re-size the browser window the scroll bars disapear. I suspect Ron's problem is related.
(29.08.2005, 23:55)

Very nice
(02.09.2005, 07:53)

Very nice. fyi, it also works fine in Panther Safari.
(05.09.2005, 20:33)

I am impressed!
(09.09.2005, 19:31)

Just thought I'd let you know I'm just running through a few sites in Firefox 1.5 Beta and It works :)
(09.09.2005, 21:08)

Lana Horton:-
This is great. I love the versatility of frame-type layouts but dislike working with frames. This is a real problem solver for me and I plan to disect your code until I fully understand it and can make it work for me. THANKS!
(15.09.2005, 22:25)

Mike Lane:-
Wonderful, really great work! I was going to comment on making the text a static size. However, I see that you in fact DID make the text a static size but I can still resize it in firefox (but not IE). This seems like a bit of a problem with firefox that is unrelated to the experiment at hand. Any ideas on how to deal with this issue?
(16.09.2005, 18:01)

Thank you for the info!
(17.09.2005, 06:33)

Looks OK! Bolsters up my ego. Do you think I would do it myself in my late eightieth?
(17.09.2005, 19:44)

Leo W. Livingston:-
Nice demo page. If it is as simple as Kim Komando states in her news letter. It's the bomb for me.
(18.09.2005, 01:39)

very good, css = freedom
(03.10.2005, 16:07)

Kevin Lawry:-
So cool I danced when I found it - Bravo!
(05.10.2005, 18:15)

Lookin' good! Very creative. :)
(05.10.2005, 20:20)

Pat Woods:-
Thank you ! I remember Jim Clark at the world telephone conference in Geneva in 1995 saying there would be two worlds on the internet community and microsoft.
(09.10.2005, 15:54)

safari 1.3.1 here :: holy grill works but scroll bar is from top of page to bottom. not nice and tucked into the window like in IE 6
(14.10.2005, 16:43)

Hail open source!!
(15.10.2005, 06:30)

Louis brown:-
rock and roll man
(20.10.2005, 19:16)

I don't know if you've noticed, but when scrolling with Firefox, the text goes a bit craggy, but in IE it's fine. Perhaps it's my PC.
(29.10.2005, 15:04)

Rafael, it's not your PC. Firefox is the problem, however version 1.5 beta does fix this. Let's hope the final version is ready soon.
(29.10.2005, 17:09)

i need this to help me with my final year project, is the HTML code much different from generating it using Frontpage, or even typing the code manually? thnx
(02.11.2005, 13:03)

Nicely done. I wish I could design one like this.
(02.11.2005, 16:50)

Rvz, the html is hand coded using EditPlus. I don't think Frontpage could cope with this layout.
(02.11.2005, 21:35)

Nicely done.
(16.11.2005, 05:59)

That is really awesome ....
(19.11.2005, 00:37)

Stu, Great work! I'm going to pinch it! Can it be adapted for different screen resolutions like the "Jelly Mold" design?
(21.11.2005, 12:44)

Dave, probably ;o) although I haven't tried it.
(21.11.2005, 12:46)

Stu, I will try to set mine up as you described first, then maybe later go for the stretchy one. Thanks again.
(21.11.2005, 14:05)

John C:-
great job hope I can make one like it
(23.11.2005, 20:13)

Dick Mc:-
I would like to request the addition of SPAM to the menu.
(26.11.2005, 10:13)

LOVE it.... Frames make the internet work the way I always thought it should, and the fact that they got "deprecated" and then trashed didn't make me happy.... think I may "pinch" it to play with as well, if that's okay!
(28.11.2005, 00:05)

very good!
(28.11.2005, 05:05)

(01.12.2005, 03:15)

Extreamly kickass.
(04.12.2005, 22:04)

That's "Tight". I Like It.
(05.12.2005, 05:13)

scrolls smoothly in ff 1.5
(06.12.2005, 03:00)

So neat, it's Cool!
(06.12.2005, 19:24)

Lucas gabriel:-
hey man I'm a professional webdesigner, but seeing this site I wonder how much i gotta learn... and also, how creative you are, congrats man, this is art!
(07.12.2005, 17:50)

Because of CSS my new office will have a punching bag within two feet of my computer. You’ve obviously well worn out yours ;-) pretty cool man.
(12.12.2005, 09:36)

Really like the design.
With Firefox, it seems to do a drag-to-resize thing when you move the mouse over and back across the top section, which is a bit scary.
Still really like it, though!
(13.12.2005, 08:27)

I think your work is excellent. What a wonderful resource you have shown css to be. You seem to be taking html to new heights and new depths. Its all a matter of layers!
(14.12.2005, 11:56)

PR8IG!!! En nu maar zorgen dat ook ik het werken met CSS onder de knie krijg! Great Tool!
(16.12.2005, 05:16)

Fantastic! Just what I needed
(30.12.2005, 19:19)

it scrolls "a bit jerky" in FF that's true, but come on.. that's f***in' brilliant.
Stu you're truely professional. Keep goin' this way. You're an inspiration.
(04.01.2006, 23:40)

(09.01.2006, 16:35)

Nice effect - I'm very impressed!
(09.01.2006, 21:09)

I just downloaded Nvu and can hardly wait to get started building my site. Thanks for a great product.
(10.01.2006, 16:54)

Gaaawk! Gaaasp! Gaaarrgh! .....I was left breathless. Ok, enough ass-kissing :), but, it certainly rocks
(11.01.2006, 16:05)

Munther Nesheiwat:-
Iam a beginner but I must say it looks interesting.
(11.01.2006, 16:52)

I think your work is excellent,you're truely professional iWILL USE IT FOR building my ARABIC site THANK U IN ADVANCE
(16.01.2006, 00:35)

anyul rivas:-
i admire you.
(16.01.2006, 17:53)

Nice piece of scripting!

Anyone know how to set the visibility (by JavaScript) of the created fixed DIV to 'hidden'..?
(23.01.2006, 01:42)

This is very nice
(23.01.2006, 17:36)

This is similar to what I'm attempting to so. Is this all CSS?
(24.01.2006, 15:45)

very good
(02.02.2006, 03:34)

amazingly clever layout
(08.02.2006, 16:28)

My god... what am i doing wrong?
Well, i'm just a beginner, so i geuss you can't blame me.
Exellent work, i also use Flash because of the layer effects, but i think i will do this in CSS now.
Thanx for all the examples!!! I love you!
(09.02.2006, 11:55)

zzyp from Texas:-
Just a note, your example page at 800x600 will not display a scroll bar unless the page is expanded to almost a full screen.
(11.02.2006, 21:38)

zzyp, only in IE. FF etc has the scroll bars at all times. Even without the scroll bars the mousewheel will scroll. Your layout of course can overcome this by allowing the content to shrink below 800x600.
(11.02.2006, 21:44)

Kanelbullen -:-
It's GOOD i have take it into my site in english...
(12.02.2006, 14:53)

what can I say, neat things that are actually practical in a world of cheesy tricks are very, very rare. Brava!
(14.02.2006, 22:21)

Very nice. Only a little bug in IE7 beta 2. If you want to scroll first the google ads and then the content is affected. Looks funny ;-)...
(15.02.2006, 17:18)

Also works in Apple's Safari 2.0.3.
(26.02.2006, 20:58)

how do i get the code for this?i know im
(27.02.2006, 08:30)

wow. that's really is amazing
(05.03.2006, 00:02)

Dark Phoenix:-
Works in the latest version of Konqueror (3.5.1) as well. Probably works in earlier versions, too.
(07.03.2006, 04:27)

DANM!!! thats cooll
(13.03.2006, 12:24)

Super work!!
(18.03.2006, 02:15)

Thank you for this idea.
(18.03.2006, 13:30)

Excellent. I am now willing to switch to css because of you.
(20.03.2006, 09:55)

Hey Stu - check this page out in IE7 if you get the chance ... I'd try and explain it, but it's too weird for words!
(20.03.2006, 12:04)

Just a little bug in IE6 (i'm a beginner, so please don't hate me): if near tuck4.gif I push a select (<img src="frame_2/tuck4.gif" alt="Friar Tuck" title="Friar Tuck" /><select><option>1</option><option>2</option></select>) when I scroll the page the select don't go under the header .....
(21.03.2006, 18:07)

Andy Crofts:-
Excellent demo!
Thanks for this. Incidentally, using the Web Developer plugin with firefox (awesome in its own right) allows me to 'play' a bit on-the-fly. Great for learning.
(28.03.2006, 11:23)

stu's mother:-
stu, i got a pop-up of a porn site when testing one of your pages on ie after not seeing expected
results on firefox. are you aware of this?
(01.04.2006, 19:11)

Me thinks you jest. But should anyone else find this happening then would they please let me know which page causes the problem.
(01.04.2006, 20:08)

Helvécio (from Brazil):-
Great !!
(03.04.2006, 03:30)

(04.04.2006, 15:24)

Rick 'o Florida, USA:-
What's old is new again! This 'classic' design still has uses! But... hey... one moment... Is the web really old enough to have 'classic' designs? Or are we just so enamored with everything shiny and new that we discard anything that's even a bit familiar? Somehow, I don't think that is good. Just because an old book doesn't require nuclear energy to be read, should we burn it?
(04.04.2006, 19:07)

Stu, I must thank you for making us (the css enthusiasts) proud w/ all your snazzy coding style. heh, I think this has to be the best site I've come across in venture of chip choppin' my css fluency.
(07.04.2006, 20:56)

Beautiful! Nice work!
(12.04.2006, 09:02)

Ruzi Shuib:-
you guys r very creative!..keep it up
(12.04.2006, 15:28)

i LIKE it!...
(16.04.2006, 04:16)

I love your site!

Lots of unique ideas and techniques, although not all of them are practical or useful :P.
(21.04.2006, 12:36)

Very funny and enlightening page as is your whole site :) !!!
Many thanks for spending your time while sharing your know how and passing over some skills.
(22.04.2006, 15:53)

It's incredible how many sites with top technologies looks so great, but when i see what you done with CSS i can't left to admire your work. I'm go to run a website with this layouts. I want to thank you for sharing your knowledge and work with us.

Best Regards
(29.04.2006, 10:06)

desde Chile un saludo a todos!!!
(03.05.2006, 17:58)

Nick H.:-
Very impressed ... thanks Stuart.
I'm sure I'll be coming back many a time.
Thanks again for sharing ...
(08.05.2006, 16:58)

Once again my breath is taken with the beauty, simplicity and functionality of CSS. Keep it up Stu! You're a inspiration to all of us CSS addicts out here!
(09.05.2006, 03:37)

Sue Duncan, Fort Worth TX:-
Hi Stu - I am brand new at this; had some html training through my job a while back, but never had the opportunity to use it. At present, I am just setting something up in PowerPoint and using convert to web page as something to practice on. I have seen something on a site that I'd like to learn how to do. The site is and I'd like to know how to fade in/out the three photos of her and frame them as they did; very effective, although it might be a little much for me right now. Many thanks!
(11.05.2006, 15:11)

Sue, the photo fade is done using 'Flash'.
(12.05.2006, 17:15)

Mighty Stephen:-
Loads of awesome menus, layouts ect.

Great site!
(24.05.2006, 16:08)

Marcelo Mig:-

This is pure art!!!

How far can CSS go when used by creative people with this level of knowledge!
(31.05.2006, 05:25)

all I can say is: "WOW!"
(31.05.2006, 15:57)

Neat - Fun - Amusing - Well coded - Educational.
What else can one say but thanks for sharing.
(04.06.2006, 12:18)

Roger Lovejoy:-
Hi Stu.

I came a cross your site whilst trying to emulate frames using css. Still I have no luck.

I have hacked your page @ to show you my problem.

In FF all is well. I have a fixed top and bottom div with the content taking up the rest of the screen, but in IE I can't get the content scroll bars.

This is a problem I've been working on for days.

The problem seems that IE doesn't recognise the top and bottom positions for the content. IE only works with a fixed or percentage height but a fixed or percentage height doesn't allow me a fixed header and/or footer. By fixed I use em as the unit so the header can grow with user text enlargement.

Ok I think that's about it. Hope you can get back to me on this.

All the best.


Please excuse the hack it's a bit rough but it shows my problem in IE.
(07.06.2006, 11:51)

Thank you for sharing. Your 'Friar Tuck-Inn' is exactly what I needed and wanted.
(07.06.2006, 20:20)

Hello, Stu. Brilliant site, and your css-frames idea is exactly what I have been looking for. I'm currently working on a site where I'm trying to achieve a similar effect. The test page is here:

I can get the top part to be stationary in Opera and FF but not in IE6. I know in IE5 it's supposed to scroll, but I'd rather it didn't in IE6, but I've tried a bunch of things and can't seem to figure out why that top part won't stay put! Your help would be greatly appreciated.
(08.06.2006, 19:51)

This is regrding CSS frames.
Iam just learning CSS and am amazed at the power off CSS and the capabilities once can build around it.

One query though, are these CSS frames Search Engine compatible? or will I have cases were instead of the entire page only one frame will get listed, similar to what happend when we use HTML frame sets?

thanks for ur time and help on this.
once again great resource :-)
(19.06.2006, 11:44)

Rob Smith:-

On all of you frame emulation examples, none of the navigation menus actually load content into the main content area? Do you have an example of how these sites can practically form the basis of a working example as without this they are not that practical? I've been trying to find out how to do it but cannot - I wanted to combine your flyout horizontal menus with the body4.html ('Pollution') site example but alas I have no idea how to do that!? Are these examples just demos which hopefully one day will work or are they intended to be usable examples? (do I need to use AJAX to make the content swap in??)

Any advice much appreciated...

(26.06.2006, 06:28)

Your site is amazing I learned a lot just visiting here. A lot of neat stuff here. I am just happy that there are people out there that are making web programming easier than ever.
(02.07.2006, 11:36)

(18.07.2006, 11:49)

That is LOL
(19.07.2006, 21:24)

Shelley Cook:-
I just found your site and am so glad I did! Thank you for providing such a great resource.
(21.07.2006, 15:34)

Extraordinary site;
After I visited it all seem to be very simple but in reality the ideas are so originally and ingenious Many say that know CSS but you are really creative!
(23.07.2006, 19:31)

This site is grand for getting started... As usual I jumped in w/both feet and am in a bit of a bind... I want to use the simplicity of frames... top over right(content/target) and left(menu frame). It would be cool to do flyouts right but I can't seem to find out how to make the flyout go over the right hand frame. can this be done?
(13.09.2006, 19:22)

Lee, the short answer is no. If you are using framesets then the css flyout menus will only flyout in the boundaries of the containing frame.
If you use divs instead of frames as with my Holy Grill then the flyouts will fly over other divs. But you can't use this in the same way as a frameset.
(13.09.2006, 19:32)

hi stu fantastic site!

similar question to what was asked earlier...

can u make the menu's work with out having to reload the page. like some sort of visiblity trick for showing div's with different content in them?

many thanks if you can help or not!
(22.09.2006, 00:19)

thank you for teaching me
(06.10.2006, 19:22)

I am not 60 yet, just 41. Maybe there is still hope for me...
Great Site - Thanks!
(12.10.2006, 13:22)

I encountered this site via w3c css specification news. Very nice to look at. Thanks for demonstrating the capabilities of css.
I only wish that one day m$ will respect web standards. For example I wrote a coloured table with no margins that looked nice in firefox, yet when I used an m$ pc, the table included nasty white borders, completely ruining the design. Due to time constraint, I had to remove the colours!
(07.11.2006, 06:41)

I am working to become a good Webbuilder
And what u did was realy nice
Sincerly Vytas
(23.11.2006, 14:57)

41 gone back for my bachelors. 2nd class is web design using html. Your site is a tremendous help thank you very much.
(01.12.2006, 14:14)

Fantastic tutorial. Just what I was looking for. I wonder how you got the scroll bar to appear at the page's left edge, though. I tried my darndest, but I couldn't get fixed, scrolling content, without having a bar appear for that div. Any recommendations are readily welcomed. There's an example up at:
(ignore the fact that I haven't put in the IE fixes yet).

(12.12.2006, 19:31)

Great work! Do you have a hack to get it to work in Opera 9? You have a perfect blend of class and humor.
(01.01.2007, 07:54)

Hi Stu,

this site is great!!!
i finnally found a plce where i can learn some decent css, i never rip code, i learn from it!!!

greetings from Belgium
(05.01.2007, 23:32)

Hi Stu!

Just checked out your site and am sorry to say that IE7 is not playing nice.
The Google ads are mish-mashed over some of the lower left-column text.


Otherwise, it looks great!
And I love the idea.

Keep up the good work!
(12.01.2007, 17:30)

Hi Found your site through w3c, love the info and the site.
I've been doing HTML for a few years now and have never been able to wrap my brain around CSS. I've reduced the tables to one in the index and using I-frames for content. Is there a way of replacing both the tables and the I-frame with CSS?
(18.02.2007, 01:16)

Stu, I LOVE your site!
Your ideas are absolutely great and very helpful... only thing is that I find so much stuff that I'm always changing my site's layout... (joking)
Thanks from Italy
(05.03.2007, 12:46)

Hey, this made me love css more, but it does work wonderful under any browser using FC6, including FF for linux.
Love your site and your ideas Stu.
Sello from RSA
(07.03.2007, 14:24)

jason f:-
this site sucks........... really i hate it. id rather be in irag than be doing this
(12.03.2007, 19:11)

jason f, no one is forcing you to stay, so I am guessing that you wont be back. Oh well.......
(12.03.2007, 19:42)

Sweet. I've never tried CSS before, but this is encouraging. All I really know is old-school HTML; I never even learned Java. Glad to have the reference. Thanks.
(17.03.2007, 02:15)

Martin Alm:-
Hi, Stu
Thanks for a great website, a true inspiration!
The holy grill is very nice, the only feature missing is the ability to add a background image instead of the white.
(21.03.2007, 20:53)
Amazing, that's all I can say. I hope to be as good as you with CSS one day
(08.04.2007, 20:11)

Stu, you are my new hero. This is great. But I ran into a small problem. Can you (or anyone else) tell me why #content won't scroll in the following example?
(16.04.2007, 23:20)

Still have that problem with the scrolling. :-(
(17.04.2007, 14:23)

Removed position:relative from the div that wouldn't scroll (even if the example on Holy Grill has it and still manages to scroll). As a result, I've had to re-z-index all the other layers, which now seem fine except for one. The top-left corner spotlight is missing. :-(

In IE it looks the way it's supposed to. How do I make the missing spotlight show up in FF? It seems to be hidden under the body background, but the other spotlight at the bottom (footer_of.png) isn't. And both are z-indexed identically.

Arg! If not for this issue I could move ahead.
(18.04.2007, 00:18)

Turns out negative z-indexes are a no-no.

Back to square one. Can anyone tell me why #content won't scroll in the following example?

I know #content is positioned relatively (necessary to get the z-index working) but the Holy Grill example does the same and it scrolls just fine. :-(
(18.04.2007, 15:19)

Alan Whiteman:-
Hi Stu,

I noticed the following code in your CSS:

#menu {position:fixed; display:block; ... }
* html #menu {position:absolute;}

Is there a particular reason why the #menu selector needs to be referenced twice, with different positions?
It's kind of a mistery.
(19.04.2007, 06:45)

Alan, this is the whole point of this deminstration and the reason why it works in IE.
IE5.5 and IE6 do not understand position:fixed so they must be fed a different style. Hence the second style which uses the * html hack to target IE5 and IE6 only and gives them a position:absolute which acts like position:fixed in these browsers.
(19.04.2007, 11:35)

Alan Whiteman:-
Thank you Stu...

Great site by the way.

As for hacks, well, every site I design has the "best viewed with Mozilla Firefox" linked blurb: Anyone with IE5 or IE6, for various reasons, should really be upgrading to FF2.

Also, IE7 is rolling out more widely which should behave as expected.
(20.04.2007, 03:12)

Amazing what YOU can achieve with css. I'm working on css-based layouts for some time now but I'm far from having your skills.

(24.04.2007, 22:32)

Hi Stu ,
Your site is a great source for CSS learning. However i am jewish and take deep offense to your site. I suggest you modify some of your scripts to avoid offending religious and ethnic minorities
(12.05.2007, 00:22)

There are some truly skilled CSS'ers out there and you have to rank in the top 5!! Brilliant examples of how things can be done, simple and well explained.

Keep up the good work!!
(14.06.2007, 08:25)

very cool site. I am trying to remove frames from an application of mine with css. SO i am going through your site. Excellent work.
(16.08.2007, 01:49)

Your a genius! I always love coming to your site. And the Friar layout is great!
(21.09.2007, 01:05)


Great site...

I'm beginer with CSS, but I'm lovin't.

Indonesian CSS'ers ^_^
(17.10.2007, 11:34)


Love your site, it has many nice layouts...
(26.10.2007, 09:05)

Mike Harrison:-
Nice Friar page - pity it doesns't work in IE6 - try reducing the size of the browser window - eventually the right hand scroll bar disappears
(11.12.2007, 12:56)

Justin Ryan:-
I am looking over your code and using it as one of my resorces to get a better understanding of CSS...How do you target something to that frame?
(16.12.2007, 02:49)

i like adding comments...
(11.01.2008, 03:30)

I love your site - wonderful examples of css. Being a beginner and seeing the power and freedom css can allow, all your wonderful examples inspire me to learn more.

Thank you for all your helpful information!
(01.02.2008, 04:02)

Rob Healey:-
Brilliant - i especially like the scroll over the shadow and under the finger - great work
(28.02.2008, 03:49)

XoX from Germany, great Site, good tips. Regards!
(15.05.2008, 10:14)

Hey, great! I still wish someone could solve the problem of keeping streaming music from stopping during site navigation.
(25.05.2008, 20:47)

Dammit! You're too good! That's very excellent tho. Deffinitely enjoyed the friar graphics too XD
(19.06.2008, 03:15)

It seems that a lot if people are benefitting from this site. I'd prefer to keep the advantages to myself and put them into practise asap.
(23.06.2008, 09:42)

Again Stu does it in Style :)
(25.06.2008, 23:42)

Hello and thank you
(25.07.2008, 12:42)

At least a year ago I cam across your fixed menu, loved it, and implemented it in a site I was doing at the time. It looked stunning. In Firefox! I didn't realise the client couldn't see what I was seeing. I then redid the whole thing without my fixed menu.

I think it's time to revive the old stuff, if I can find it, and see if I can use it for another similar site I'm currently doing.
(25.09.2008, 12:38)

nice one.
(15.10.2008, 15:18)

Brings up a wide smile!
(29.10.2008, 15:05)

I am just Mom who likes to play in her CSS playground her in Denver, CO, but you, Sir, are the master. Thank you for your website.
(14.01.2009, 13:46)

this is made out of WIN.
(13.02.2009, 12:49)

Hey Stu! Thanks again. I'm using the Holy Grill layout on a new website. Thanks for all of your awesome work!
(04.03.2009, 19:34)

Roger Lovejoy:-
Bit jerky in Opera 10 but OK in Firefox 3
(01.05.2009, 12:20)

Stu, I Would Like to use this for my website's homepage and am asking permission
(01.05.2009, 14:36)

Stu, you are now officially my hero.
(07.05.2009, 15:24)

Sérgio Mello:-
Congratulations for detachment of your knowledge. Thanks!
(19.08.2009, 23:18)

My Name:-
Thank you, you are awesome!
(26.02.2010, 05:38)

Wow :) I love it
(04.04.2010, 07:48)

I've been struggling to produce a page design with just a fixed top div and a scrolling bottom div - haven't found a fully functioning example yet but your site has been very informative, thank you!
(03.08.2010, 16:48)

holy grill!! :))
(22.09.2010, 08:41)

I have a little problem.
My NavStudio menu generated don't work with
xhtml1 transitional or strict in Internet Explorer. Can your interesting method to force position:fixed in IE
work for html not xhtml1?
(23.09.2010, 19:11)

As long as you use a standards compliant doctype this will work with html 4.01
(23.09.2010, 19:17)

Alan Holm:-
Hi Stu

Whole page scrolls in iPhone 4.0.

Any plans to add mobile support?

Everyone seems to think that 2011 will finally be the year that mobile Internet will take off in a big way, so, perhaps it is time to start accommodating your amazing designs to work on mobile phones?
(08.01.2011, 21:42)

My latest demos are all checked on the iPhone, iPod Touch, iPad and Blackberry.
(08.01.2011, 21:58)

Alan Holm:-
Hi Stu

GR8! I'm very glad to hear that.

But then do you have a demo that is part of the "latest" ones that includes fixed navigation while content scrolls that you have i-checked?

You have so many great demos these days that it can take many hours to work through them all, one by one when trying to find something specific (perhaps something seen during previous visits that could be worth re-looking at for a new project - once it is eventually relocated) - despite your broad categories - perhaps thumbnails on mouseover could help recognition when searching without having to wait for each page to load?

Thanks for all your innovative ideas! I refer everyone I know in the Web world to your site.


Alan Holm
(10.01.2011, 12:07)

Unfortunately Safari Mobile browser does not support position:fixed; and treats this style as position:absolute;
So it is not possible using just css to have a 'fixed' navigation system.
(10.01.2011, 12:40)

Alan Holm:-
What a pity!

I've grown fond of this approach since the navigation is always instantly avilable - but it looks like I'm going to be forced to abandon it to accomodate the emerging (and I suspect soon to be dominant) Mobile world.

BTW - I experience a very similar effect with print styles together with this fixed navigation where only what is displayed on the screen prints, just as the iPhone only displays what fits on the screen, without scrolling.

Ah well, I suppose I have no option but to redevelop - possibly using your latest menu that the CSS Play widget has just shown me you've got working with Safari & the i-Phone et al.

Nice one, Stu!

Keep up the great work!
(12.01.2011, 15:20)

Stu - your works are GREAT!
Thanx for inspiration & knowledgebase!
Beautiful photos
I wish you the BEST!
(23.02.2011, 23:31)

I am amazed at the wealth of information and details on your site. Quite an inspiration.
It is getting me cracking with motivation. Well done.
(20.03.2012, 11:26)

Holy Grill is great.
Slight (apparent) problem is that rh side appears to be 'lost' off screen and not accessible.
Not really a problem as no info/text is lost but just does not look right IMHO.
(22.05.2012, 19:23)

Neil Thaler:-
Absolutely loved the Friar Tuck Inn design.

I saved it at a web page complete to examine how you had done it but when I open it up in IE8 (old one at work) the frame looks incomplete. the frames doesn't fully go across the top or down the side. Why would this be?

Thanks for the help :)
(26.09.2013, 09:35)

This demo was produced 8 years ago when IE6 was the main browser. But it still works in IE7, IE8, IE9 and IE10.
So your problem will be due to an error in copying the code.
(26.09.2013, 11:06)

I have been searching the entire Web for a Week but there is not ONE single CSS site that has the legendary Holy Grill layout (simulated frames layout).

Pls. help me find some examples!

Thanks very much for all the great work.

(05.11.2014, 07:45)

This demo is now 10 years old so I would imagine that most websites have moved on to use the latest css3/html5 specifications.
(05.11.2014, 11:50)


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