Mobile Friendly Website


Doing it with style

position fixed 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 Stu,
Excellent stuff!

One small problem is the fact that the CSS doesn't validate, but, if you remove * html {overflow:hidden;} and body {overflow-y:auto;} from the CSS and apply it using those nasty but useful IE 'conditional comments', you can achieve CSS/XHTML validation nirvana!!

(10.03.2004, 20:16)

Not too worried about the css, but just to please, I have now used conditional comments to target IE6 :)
Thanks for the comment BTW.
(11.03.2004, 00:08)

when testing the page on ie6, the V scrolls didn't display for me, it still worked using my mouse wheel thought.
(16.03.2004, 09:29)

V scrollbar is present on my version of IE6
v6.0.2600.0000 (+ all updates). Try putting *html {overflow:hidden;} in the main style instead of the separate IE6 conditional comment.
(16.03.2004, 10:00)

Hi Stu, good work, very interesting. I suspect Flump's problem may be the same as mine: the vertical scrollbar is there fine on a full width screen, but when I reduce the width of the viewport it heads right, off the edge of the page.
(19.03.2004, 10:43)

it dont work
(19.03.2004, 13:28)

This will happen in IE6 because I have only set the vertical scroll bars as auto. If you change this to overflow:auto; then both scroll bars will be visible (as with Mozilla).
(19.03.2004, 13:36)

I'm not sure you're right about this - I've tested your idea without success. I can force both scrollbars to appear initially in IE6, but not to work, and the vertical one still disappears...
(19.03.2004, 14:51)

A small update to add an html horizontal 'auto' scrollbar in IE6 so that although the vertical one goes off screen it can be recovered by horizontal scroll. Not the best of solutions but it works.
(19.03.2004, 16:17)

It works, but I find Windows still makes some strange requirements. The example shows the main content with a top margin of 100px. Move the order the main divs appear in the html (have the menu come before the content) and the top margin collapses in Win IE and NN.

This behavior is not seen in Win FireFox or on the Mac.
(17.05.2004, 18:10)

Once again curse bill gates curse you bill curse you !
Athough I found the position fixed useful it become srather slow when you have lots of stuff.
Thanks for the tip Stu
(21.07.2004, 14:40)

groovy cool
(03.09.2004, 04:33)

Stu, do you know if this meathod can be applied to background images, specificaly table background images? i have been having problems with this page in IE 6:
(i tried to impliment your code but i am working on a mac so i haven't ad a chance to see if it works yet... i'm also a newbie...)
(08.10.2004, 10:34)

This is truly a wonderful way to do static menus. I am so impressed. Because my site has hundreds of pages. I'd like to do the whole header, menu, foot, etc. css as an external css file that I can have all my pages link to. but I'm not quite sure what elements would be pulled out into the .css file. Also an external css file is formatted a bit differently. There is no doubt in my mind that css is infinitely better than table layouts.
(18.11.2004, 00:36)

hi there,
tried out to fix a picture on the left bottom, works very good, but ie 6.0 shows two scrollbars. this isn't really what i want, how can i fix this problem?
(06.01.2005, 21:57)

reto, I have placed a picture in the bottom left to show the method. Hope this is of some use.
(06.01.2005, 22:15)

IE 5 and IE 5.5 on the mac can't see it so it cuts out alot of users. Really a bad idea for a layout.
(11.02.2005, 22:50)

Unfortunately I can't test on a Mac. But it may be possible to adapt or alter the css in a way that will work. If anyone has managed to get it to work on a Mac perhaps they could post here, or email me with their css.
(11.02.2005, 23:19)

This is very inflexible solution, if you have more text. After content height exceeds 1000px, you must calculate new values for page and shadow dimensions. Not a simple job.
(24.02.2005, 17:13)

Tomi ~ this is a demonstration for the fixed menu not the content div. This can be styled anyway YOU like.
(24.02.2005, 18:38)

Ok, but I must admit that getting IE to behave is turning me to nuts. Can't get my own menu fixed at all in IE6. I hope microsoft will abandon their browser .-)
(24.02.2005, 19:50)

I think you will find that IE7 is to be released later this year. Let's hope that it is more than a security fix.
(24.02.2005, 20:04)

i could only get this to work if i used the xhtml doctype; using the 4.01 Transitional doctype worked fine in Firefox, but stopped working in IE.
(24.03.2005, 17:00)

also, pages with lots of images seemed to cause IE to have problems with the overflow (it didn't seem to count image height when calculating page height). Setting the page height to a suitable value greater than 100% fixed this.
(28.03.2005, 11:13)

For this to work IE needs to be in standards compliant mode. I have added several images to the layout and all seems to be ok still.
(28.03.2005, 11:44)

I think that IE5 and 5.5 on the Mac needs a hack. If anyone can confirm this?
(28.03.2005, 11:46)

Stu, yes it doesn't work on IE on the Mac, although Safari is fine
(31.03.2005, 15:31)

hello, nice-less"text"-solution, but as I try to implement it on a multi-page site, can't make it work in all other 3 browser is just fine;)...the problem seem to be with which place I put the overflow'overridding hack comment..any idea?:)[css/head/body are in different pages/templates]
(29.04.2005, 16:38)

I got a fixed top banner image working just fine (IE and FireFox), but the content is giving me a hard time. Because the content of the page has a lower z-index than the top part, the links on the content part won't work. I noticed that on your site they work, but even going through your source code didn't clue me in of what could be the problem.
(09.05.2005, 12:04)

There is a problem with width of body in IE while using this. Basically if u have anything that have 100% width, then body will set it's width to 100% of html's width, and html's width dont include scroll since it's hidden. I've made a simple Javascript to keep body width fixed for IE. First of all, i keep all content of the site in one div with id="IEsux" :P. And here is the code to fix the body width:

// here u can write how much u hate M$
var scrollwidth;

document.getElementById("IEsux").style.width = document.body.offsetWidth;
function adjust(){
document.getElementById("IEsux").style.width = "100%"
document.getElementById("IEsux").style.width = document.body.offsetWidth-scrollwidth*2;


Hope that will help
(26.06.2005, 12:06)

re: CSS position:fixed; for IE6
I like your layout and I am trying to tinker with it so that when you click on a link instead of jumping away, you jump to an anchor in the same document; the layout is then corrupted, the menu jumps up off the top of the page. Any suggestions?.
(03.07.2005, 18:20)

re: previous post, should have mentioned that it works in firefox but guess what it doesn't in ie6.
(03.07.2005, 18:25)

Peter, I have added an anchor 'bites' which can be clicked on at the bottom of the page. This works in IE and FF. I have also changed the menu item Firefox so that it is also a link to 'bites' this also works in IE and FF.
(03.07.2005, 19:54)

I applaud you on you "position:fixed" for IE, but of course then your left with either not having a fixed position in Firefox or Safari,but absolute. If this is the price to pay for the fix in the most used browser, then so be it. However, it would be nice to get the same look and effect in all the major browsers. Any suggestions on how?
(08.07.2005, 00:57)

Er...I'm pretty sure "overflow-y" is an IE-only thing (because IE's "overflow:auto" doesn't work so well).
(14.08.2005, 05:59)

I've noticed that absolutely positioned items that are inserted via javascript don't seem to honor this bug? Have you noticed the same?
(30.08.2005, 18:44)

Mike, I tend to avoid javascript if I can so have not noticed this effect. But if it works and you want to use its 'feature' then that's fine.
(30.08.2005, 19:12)

Waht is with this? This will do work!

<td><div style="position: fixed; top: 0px; left: 0px;">nothing</div></td>
(01.12.2005, 12:11)

SORRY: This will not work!
(01.12.2005, 12:11)

Hi Stu, can you give me a connection between this and your magnify image? Thanx
(01.12.2005, 12:47)

As a CSS-Newbie I'm in awe at all the amazing effects on this site - and in shame at my own tinkering. Please grant one question: My fixed menu runs across the top of the page, the content gets scrolled just like in this example. The problem is with my anchors within the content - links to them beam the content to the very top of the page, hiding them behind the menu. I've "fixed" it by moving the anchor a line or two above its actual target, but maybe there's a better way? You can see what I mean at Thanks for any ideas!
(16.12.2005, 08:42)

some hacks on your code
Mor ie5 mac:
/* hide from IE5-Mac \*/
* html #fixpic {
(29.12.2005, 10:48)

I have tried modifying the code and making it work on my site but it still only worked in FF and Safari (i have not tested NN or Opera) but IE6 was still broken (the whole screen scrolled) so I decided to work it backwords and take your code intact and put it up to test on IE6 ...still not working (when I view it on your site it of course works just fine)
Great site BTW I am trying a lot of your ideas and some new things, Cheers.
(11.01.2006, 01:23)

ZAK, check your !doctype to make sure that you are not in quirks mode. This one needs IE6 to be in standards compliant mode to work.
(11.01.2006, 08:09)

Well I tried another path, I somehow got it to work ...a mix of this built on the 100% background... I would love to know why it worked this time and not before but I don't want to push my luck and get more lost.
(11.01.2006, 18:51)

Hi, I'm trying to float a menu as well within IE. I've been able to get it to work w/o issue in FF. I decided to copy your source code (no changes) and dropped it into a web server I'm working off of. Opened it up in IE, but it's not scrolling. Any clues?

(13.01.2006, 21:54)

wWidow, you are probably trying to float the menu within the body not the content. The body does not scroll so any menu placed there will not scroll. Put it in the content area and it will scroll with the content.
(13.01.2006, 22:24)

Hi! Has anyone tried positioning a pic right:0px in stead of left? It'll put the picture in front of the scrollbar, in IE. FF handles it nicely though. I don't want to use something like right:20px for a lot or reasons (for one, it'll work in FF...) Any ideas for getting the browser to count the width of the scrollbar as well?
(19.01.2006, 21:18)

I get two scroll bars. One to scroll thye menu and one to scroll the contents, and I only want one scrollbar!
(31.01.2006, 19:26)

Hi, this is a very neat layout already, but I was wondering whether it could be taken a bit further: to ImpossibleLand... :-) The idea is to have the text within the main white div wrap around the fixed menu... As it is, the scrolling text flows under the menu; is there any way of actually making the text flow AROUND the menu? ImpossibleLank, I guess, but the idea is neat, no?...
(22.02.2006, 19:43)

Fine css work Stu. Question: I have placed all css in an external file. This shows up fine. Added a background image to this file, but the image won't show. However when I place all css in the head the image does show. What mistake do I make?
(03.03.2006, 15:16)

The path to your image file must be wrong. When you are using an external css file, the path to the image is from the css file directory not the html file directory.
(03.03.2006, 15:56)

Duh..... the path was right but I made a mistake in writing the property of my div and hence the wrong value. S..t happens;) thanks for pointing me on the right path.....
(04.03.2006, 09:58)

Stu, you are genius, giant, keep on ;)

Google ads make this one imposible to read. Crossbrowser impossible, need to save it and delete some code to see content. What would J. Nielsen say :) :)
(16.03.2006, 22:23)

Uoopps, there was other solution:
to change resolution of screen from 800x600.

(Im last pro in the world stuck with it?)
(16.03.2006, 22:46)

Tomislav, I've shifted the ads to the left just in case anyone else is using 800 x 600, hope this helps.
(16.03.2006, 22:55)

Hi Stu - cool CSS. This is something I've been looking for that will work in IE6, since most of the world uses it. For a website marketing my book (not IT related), I'd like to be able to have a full background image that will lay under the scrolling text box, and I've tried z-indexing the background image (called by #fixpic) and #page, but the text box stays under. Would you have some pointers I could try out? - Thanks
(22.03.2006, 18:58)

i'm very happy to have found this. all the other solutions i've found to fix a menu have been javascript, but i much prefer css. Simplicity, Simplicity, Simplicity!

this trick didn't work for me when i declared my encoding using <?xml version="1.0" encoding="UTF-8"?>. once i removed that and used a meta tag instead, it worked.
(31.03.2006, 23:27)

are you sure absolute and relative can't be used in other parts of the document? my menu that i'm fixing relies on relative and absolute positioning to hide and show elements, and it works fine for me.
(31.03.2006, 23:29)

nevermind on the encoding thing. it works now.

sorry for the triple post. :p
(01.04.2006, 00:03)

Would you believe I actually triggered this by accident? I started getting the "fixed" effect without even trying and I couldn't figure out why until I saw this. I thought it was pretty weird because I knew that "position: fixed" doesn't work in IE. The funny thing is that even though it was an accident, it actually looks really good.
(11.04.2006, 11:34)

The 100% work around for IE6 will make IE7 go like booboo... :)
(23.04.2006, 23:19)

hi stu, looks great!
and it works!
I got 2 questions...
1: I don't get it working under IE6 (how do I use the added comments ?)
2: I have another problem, I use <center> </center> to position my site (800x...) so when the browser window is smaller,everything adjusts, except the menu off it hovers above text (not my intention)

(26.05.2006, 09:29)

it's such a great hack ...

it's a pity i can't use it on the same page as the Lightbox script because it uses position : absolute :[

i wish i could find a way to make them work together ...
(26.05.2006, 17:58)

I'm using this excellent method to fix a header and a menu in a website. I'm trying to use anchors to skip to certain sections of the page, but when I click the anchor it sends the content under the header. I fixed it in FF by adding some padding on the anchors, but no luck in ie6 nor ie7
(01.06.2006, 00:22)

Mr Longs:-
How do i create a website that doest have horizontal scrollbar due to overflow,

(03.07.2006, 18:34)

Mr Longs, make it fluid. This way all the containers will shrink horizontally when resized.
(03.07.2006, 18:59)

I have been looking for a solution to the ie6 fixed position problem for a while now and have to say this is the dogs cahooners! Magic fix, Stu deserves a congressional medal of honor if he's american or a nighthood if he's british. Or whatever other honour that can be given to him.
(15.07.2006, 04:37)

This seems to work great for IE6. One problem is that my script "window.scrollTo(0,0)" will not work. Any ideas?

I guess this is because the window has no scroll bar anymore, the scroll bar you see is created and the main one hidden right?
(30.09.2006, 02:37)

on my pages using this hack, it works for IE7 when I change it to use it for all IE versions (or upto IE7):
<!--[if IE]>
<style type="text/css">
html {overflow-x:auto; overflow-y:hidden;}
<![endif]--><!--[if IE]>
#adsie {position:absolute; top:10px; left:0;}
(08.11.2006, 10:13)

you are a winner and a legend.
it still took me days to work out that the xml header <?xml version="1.0" encoding="UTF-8"?>
puts IE into quirks mode (bad),
and that you can't even have a background image fixed in the not-fixed part of the page,
and you can't have z-indexes on the non-fixed parts either (because z-indexes only work on positioned objects).
But i overcame those troubles, and you showed the way.
it's coming together at
(12.12.2006, 12:12)

You the man! No, you the man! :) I love this hack, it's absolutely brilliant. Thank God for people like you. Keep up the good work! It's nice to know that when there's a bug, there's also smb who knows how to fix it. Thanks!
(22.02.2007, 20:09)

Ejaz Asi:-
I wonder if one can make the links in the static header or nav load the content in the content section without reloading the entire page. Would that be AJAX like example or we only have traditional frames to work with for this particular need?
(28.02.2007, 19:22)

will this work with a centered layout (where the page remains centered when the browser is re-sized.)

curious... because i have a tab on the left of my page that uses this absolute hack but it does not move with the rest of the page.

(02.04.2007, 08:31)

CONGRATS MAN! Now, how we can use this hack in print media type sheet? Can yoou help me?
(04.05.2007, 18:36)

Stu, I cannot for the life of me get this to work on, and it's making me buggy. I have tried everything--the overflow, the 100%, the * html, getting rid of the one "position:relative" in my CSS--and it just won't work on IE6. Can you tell me what's wrong? I would be most grateful, as we'd like this to be available to as many people as possible, and the fixed ToC makes a big difference. Thank you.
(02.09.2007, 05:54)

There are 2(!) vertical scrollbars in ie6. Good solution :/
(03.10.2007, 07:10)

max, not in my version of IE6.
Just one scroll bar.
(03.10.2007, 13:23)

IE7 has two scroll bars but that can be fixed by changing the extra styling for IE6 to include IE7. I will do this tonight.
(04.10.2007, 09:10)

hi stu :)

your "position:fixed"-hack is absolutely amazing, but it seems that the "conditional comment" haven't to include ie7, otherwise the page-content can't scroll.

<!--[if lt IE 7]> ... <![endif]--> runs in ie7 perfect.

greetings from germany,
(07.10.2007, 08:28)

maik, this is odd. I had just changed this to include IE7. I have two versions of IE7, one showed two scroll bars. I have changed this back to how it was and it is ok on my home laptop running IE7 on Vista.
(07.10.2007, 09:27)

thanx for your answer, stu ;)

i've checked your example-page with ie7 on winXP, and the page can't scrolled, because the vertical scrollbar is missed. (???)

when i change the CC-operator from "lte 7" to "lt 7" the y-scrollbar appear.

best regards,
(07.10.2007, 10:36)

hi there, can you tell me if you have a tutorial on show and hide boxes? i want my text to show but with a button at the bottom that says "more details" and when someone clicks it i want it to say "hide details" so they can go on the next this possible?
many thanks, love your site...
(08.10.2007, 16:46)

Tracy Ligon:-
Thanks for the information, it is outstanding, I do apprechiate the work you do.

I did find quite by accident that if you do not declare the
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
The menu will not stay fixed! Interesting ain't it? I just "love" IE ;)

Thanks again
(18.10.2007, 04:53)

Thank you...but i had some problems in IE too.
(04.01.2008, 17:19)

Yes very right tracy, the doctype needs to be declared for this to work in IE
(24.01.2008, 09:53)

I've read the comments here searching for a possible solution to a centered layout where the left position can be flexible... it seems there's no solution, is it? My client likes a fixed search form he had seen on a 4.1. transitional site, left oriented (and realized with javascript), and would like to have on his new site, which is centered. It's hard to say to him: New browsers, new standards, no solution to this ... If there's an idea it I would be glad to hear it :-)
(23.02.2008, 14:20)

Like Guenter here as well, I've been trying very hard to make this work with a centered layout where the foremost layer is not tied to the left edge. Can anyone tell us if this is at all possible or am I wasting time even trying?
(10.04.2008, 06:14)

hi stu,

I know I'm a bit late on this, but I have the following problem with the fixed positioning:

when resizing my browser's window, the content scrolls underneath the main menu (this element is fixed positioned).

How can I determine the fixed positioned menu, to be fixed only in the vertical coordinates, so that it stays in screen when you scroll up or down, but it scrolls horizontally with the content when the browser window is smaller...?? So that the 2 elements don't overlapp in horizontal scrolling...

I don't know if this is possible, but I'll take any other solution you offer.

thank you!
(15.04.2008, 16:26)

It does not work in my website
(31.07.2008, 18:17)

Would it be possible to have this respect a containing element? IE..

<td>A very long post....</td>
<td><div>fixed sidebar</div></td>
<td>Content that won't be overlapped</td>
(09.08.2008, 07:15)

Hy Stu

you're the best! Your solution to the problem that IE can't fix positions has been very helpfull!
Now I can make fixed navagtionbars while the content can scroll!
(25.01.2009, 13:34)


if you want to keep both menu as the content in the middle of the screen at any resolution, you have to change in Stu's code:

in #menu (on top of <head>): set the width on 100%, and...paste the menu itself (in <body>) in the right column of table of 2 columns. Set the total of the table also on 100%, but the left column you put on 20% for example.

It's not perfect, but you can see how the menu keeps fixed in vertical position but also is flexible in horizontal position when the screenresolution has changed. Whenever you want to change the horizontal position of the menu, experiment with the left positon in #menu (in px) and with the width (in %) of the left table.

look also at:
www (point)
rockarolla (point)
nl (slash)
test (slash)
cssnavtest (point)
(26.01.2009, 20:39)

Hi lots thanks for the trick several years later stills very usefull, couse too many IE6s still out there, almost drove me nuts the...

<?xml version="1.0" encoding="UTF-8"?>

...header, it disables the whole trick. Why? I dunno...

Also I found a little problem related, at least for me, IE6 always puts a lateral scroll bar that is very convenient for web applications (to not displace elements when page size require a vertical scroll bar, in fact I'm using another CSS trick to force it in Safari and Firefox), to correct this I've found usefull add this line to your ie6's conditional macro "[if lte ie 6]":
body {overflow-y:scroll;}

Now this is working exactly as I want for my application. Thank you!
(29.01.2009, 16:20)

I discovered there's one problem with the "position: fixed" page and it codes...browser Opera enlarges the line height a lot! And changing it in the stylesheet doesn't solve the problem! However, this problem does not appear in IE, Firefos, Chrome and Safari.
(01.02.2009, 12:45)

Another satisfied developer :)
Thank you very much!
(26.03.2009, 16:06)

I'd been looking for this solution for over a month. Thank you !
(11.09.2009, 23:07)

Is there anyway to achieve this in firefox?
(27.12.2009, 09:41)

Dominic Watson:-
You're saying that this is a fix for IE6 fixed but your fixed menu doesn't actually work :D
(20.08.2010, 14:14)

This does work in IE6.
Are you testing using a standalone version of IE6 on the same PC as IE7 or IE8? If so then there is a flaw in this where IE6 thinks it is the latest version on the PC and gets the wrong stylesheet.
You should test using a full version of IE6.
(20.08.2010, 14:40)

after hard try n error--->wont work with xajax, cause of script-tags b4 DOCTYPE
(25.08.2010, 13:14)


Its really nice but not work perfectly in ie6.

i use some menu at top but its not perfect fixed and show some reflection at bottom of body
(28.09.2010, 09:03)

Hey Stu,

Great demo and really helped me get going. However, open up your page in IE6 and start resizing its width. Your scrollbar will disappear.

Well, to get it back, I tried changing the CSS for body from overflow-y:auto to overflow:auto. Looks good at first, but try hovering over a link of some kind. IE6 strikes again with a nasty bug I've never seen before as your window mysteriously starts shrinking.

The solution, finally, is to nest everything you have into another container directly under body, in the case of your demo div#page, and give overflow:auto to this element instead. The shrink bug disappears and you still have your scrollbars no matter the window size. Huzzah.
(22.10.2010, 01:49)

Another tip for those getting two scrollbars, make sure you have html { overflow:hidden; }
(22.10.2010, 01:52)

I owe you big time for this!!! I have been trying to figure out how to code this for ages. If ever you need a pianist for a wedding........ (
(12.05.2011, 10:34)

Another James:-
Also works with overflow-x: auto;
(15.06.2011, 14:11)

Thank you!
(07.05.2014, 15:07)


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