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

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)

10 of 107 comments (part 2). [ « ] [ » ] [ * ]


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