Mobile Friendly Website

CSSPLAY

Doing it with style

Basics2 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}cssplay.co.uk.

Post a comment


Current posts

Duchess77:-
Very cool... http://www.therealmonline.org in the directory 'wordpresstest', I've got extra padding between the top banner and the content... and there should be a scrollbar, but it seems to have disappeared. On top of that, I have two full instances of the two 'Lorem ipsum' paragraphs, but only 1 and a half manage to get on the screen when it stops scrolling. wp-layout.css is the CSS file in the same directory.
(22.07.2004, 19:52)

Duchess77:-
PS - I really appreciate your help. I'm a complete n00b at CSS and desperately trying to learn so I can actually start making layouts without bugging other people... LOL
(22.07.2004, 19:53)

Stu:-
Ok Duchess77, just this once I have looked at your html and css and posted the results here.
www.stunicholls.myby.co.uk/cssforum/realm.html

You will see that I have replaced your javascript table menu with the css equivalent (much easier) and redone the css to give scrolling content. Hope this is ko ;o)
(22.07.2004, 21:47)

Duchess77:-
WOW! That's way more than I expected! Thanks a whole bunch!!
(27.07.2004, 14:25)

Carl:-
If you have only a little bit of text the scrollbar disappears and leaves a white column. Is there a way to put the scrollbar there permanently similar to scrollbars=yes for javascript?
(12.08.2004, 12:27)

Stu:-
You could change the #content css from overflow:auto to overflow:scroll but this will add a horizontal bar as well (although most of it will be hidden by the footer.
IE also allows overflow-y:scroll;
The only alternative is to make sure that each page has a content of more than 100% by adding enough 'padding' to the content.
(12.08.2004, 21:53)

RandomEnvy:-
Way cool. I'm thinking of using something like it. 2 nits:
a) The mouse scroll wheel doesn't work in FireFox 0.9.
b) Print preview on FireFox 0.9 and IE 6.0SP1 WinXP are messed up.
(15.08.2004, 03:29)

Stu:-
Hi RandomEnvy, thanks for the feedback.
The FF mousewheel is a bug in FF that has not yet been fixed.
The print preview is flawed but should be fixed using a separate print style sheet.
(15.08.2004, 09:14)

Stu:-
For RandomEnvy (and anyone else who may want a printout) I have added a printer style to show how this can over-ride the screen settings.
(15.08.2004, 19:17)

TBone:-
Stu - great stuff! One prob I'm having using this in a browser embedded in C++ app: Using the IHTMLElement scrollIntoView function to jump to an anchor causes the entire window (header & footer) to scroll up by a small amount (maybe 10 - 15 pixels). Doesn't go away until a complete page reload. Any ideas what's up?
(25.09.2004, 16:13)

I:-
Just want to tell you it seems also working with IE 4 which I use.
(26.11.2004, 13:18)

T-dude:-
Keep up the good CSS Stu!
(07.01.2005, 23:57)

Zhang Weiwu:-
Stu: you said it cannot scroll because it is a FF bug. Can we know if this bug is supposed to be solved by FF (I mean, recorded in their bugzilla)? I am using Mozilla and eiphany, same bug.
(31.01.2005, 14:20)

Stu:-
https://bugzilla.mozilla.org/show_bug.cgi?id=97283

Only fixed in Netscape 8 (9/01/2005)

A FF fix is promised in release 1.1 due in March.
(31.01.2005, 22:16)

Taper:-
Hi Stu, great stuff!! I use a Mac. All browsers (firefox/Netscape7/Opera/Safari) display it very well but IE 5 for mac under MacOS X. This browser won't display anything. I hope there is a simple solution because i'm a newbie on css. Thanks
(01.02.2005, 21:42)

Hilary:-
This has worked better than anything else I've tried and is really well explained with CSS comments. Haven't quite got the padding to remove the overflow on scrollbar (only using a footer) but will keep working on it.
(23.02.2005, 16:00)

saimoto:-
Hi, great css, but why does IE5.2 MAC does not show anything? It shows a blank site.
(02.03.2005, 13:04)

Joe:-
RE "Back to Basics II"
This CSS design has a bug in it. It appears that the bug does not show up in your example because of the content.

Description: Disapearing Scroll bar in IE6sp1

If you add a wide image to your "content" div, and resize the width so that the right side of the browser window overlaps the image, the vertical scroll bar disapears in IE6sp1. (Firefox does not exhibit this behavior.)

I do not have a fix for this IE bug. I have tested a number of solutions and IE consitently fails the tests. One developer comment I read asserts that a fixed footer either can't be done, or that the solution is too awkward for a production site.
(15.03.2005, 02:28)

jdr:-
The header and footer fail to show when I put the css in an external file
(05.05.2005, 16:09)

Stu:-
jdr, are you including the print css which hides the header and footer?
(05.05.2005, 17:34)

Gary.:-
Hi Stu, Something strange with back to basics II - mouse wheel doesn't work the scrollbars in Firefox, only in IE. I was trying to fix this in my own page that I based on B2B2 and couldn't lick it, so I checked your original and found the same problem. I've tested this on two separate PCs, so it's a FF problem not a mouse hardware issue. Any idea how we can overcome this? Appreciate your thoughts!
(20.06.2005, 11:26)

Gary:-
Apologies, I have just read the last page of comments and see that you have previously addressed this FF bug. Let's hope they catch it for an upcoming release! Cheers, Gary.
(20.06.2005, 11:30)

Bill:-
Konqueror 3.4 also
(01.07.2005, 23:34)

davethedrummer:-
How do you use the .pad2 class? Sorry I am new to CSS. Can someone show me some sample html that shows how to use the .pad2
(18.07.2005, 19:55)

Stu:-
.pad2 is just a padding div applied to the top and bottom of the #content div. If this were not used then the #content text would begin under the #head and finish under the #foot. The .pad2 class should be at least as high as the #head so pushing the #content text down to start in the visible area below the #head.
Try leaving out the .pad2 div on my example and see what happens.
(18.07.2005, 21:23)

davethedrummer:-
Thanks Stu, I am using the .pad2 class nested inside the content DIV and now I see how it works and also finally my scrollbars look correct.
(21.07.2005, 20:52)

Darren:-
you are a god that walks among us?!
(03.08.2005, 12:36)

Michael:-
I am an absolute beginner. I followed your instructions and made a page with CSS-frame that really works in IE, FF and Opera.
Except for the mousewheel for scrolling in FF.
Though I really like your "frame"-layout, I will not go through with it, because it places
FF at a disadvantage (not-scrolling), while IE is causing the problem by not following standards in CSS. That just is not fair.
Sorry.
(02.11.2005, 21:09)

Stu:-
Michael, the FF mousewheel scroll is a bug in Firefox and not an error in the CSS. Firefox version 1.5 beta fixes this problem.
(02.11.2005, 21:33)

Confucius:-
Stu great Site! I have a question, what tags are you using to get the scroll bar to appear only on the far right side? Compared to the other design of yours: http://www.stunicholls.myby.co.uk/layouts/fixit.html
What is different?
(10.11.2005, 20:22)

trevor:-
thanks a ton Stu! this example is so great for me today because i have been trying to simulate the look of a 16x9 movie reformatted for tv.

thanks for sharing. i wish you a boundless array of good things
(10.11.2005, 20:43)

Thomas Wolf:-
Stu,
Fantastic - many thanks for sharing indeed. Avoidance of quirks mode and limited use of hacks is wonderful :) Perfect, if only for one thing - when the page's content is short and does not force vertical scrolling you get a white bar down the RHS where the scroll bar would normally appear. Looks a bit odd when you start adding colours to the footer/header, etc. ...
(20.12.2005, 09:56)

Yanfu Xie:-
I am an absolute beginner. I followed your instructions and made a page with CSS-frame .I place the Google AdSense code on my page and view it in firefox, while draging scroll bar I found a problem . please check http://www.yitu.org/webtemp/test.htm
if you have good idea to correct it. please give me a email ( yitumail-code at yahoo dot com dot cn )
Thank you very much.
(07.01.2006, 07:50)

Chris:-
Hey, I love this method, but I have an issue in IE 6. Please visit:
http://lifshitz.ucdavis.edu/~cellison/physics7b

Everything looks just fine in firefox, but there are no scroll bars in IE 6...though, I can still scroll with the keyboard or mouse wheel.

If you have any suggestions on how to fix it, please let me know.

Thanks.
(17.01.2006, 09:28)

Chris:-
I figured out the problem, and it wasn't related to this design at all. For some reason, the scrollbar in IE 6 moves to the right if a form has too large of a width. This does not show up in FF 1.5. Anyway, I just changed the form width to 95% rather than 100%.
(17.01.2006, 23:56)

Bea:-
Hi Stu

I am really new at CSS and am trying to work on an external stylesheet based on your format. It just won't work as a linked stylesheet in IE - what am I doing wrong???

It is okay in FF but just doesn't work in IE !!!!

That's just with copying your code exactly as you have set it out in your demo with NO changes to see if it would work in IE.......

:(
(22.02.2006, 11:43)

Sara:-
This is awesome, thanks a million for sharing it.

As others have mentioned, it seems not to work in ie mac. When I look at your example page in ie mac 5.2 the bottom pad is missing and the scroll bar behaves strangely (the "bottom" of the scrollbar is below the edge of my browser window) -- any thoughts on how to get around this problem? I'd really love to use this but can't ignore my mac ie users.

Thanks Stu!
(01.03.2006, 18:12)

wcardinal:-
your method is working great for me. The only problem is a <select> box appears on top of the footer when scrolled. any solution to this with your method?
(04.04.2006, 06:49)

bullshark:-
Bug in Bascis2.html. There is an unseen problem with the footer, because you styled it text-align:right. The leftmost 18 characters are hidden unless you add the .pad class to the footer div.
(01.05.2006, 19:07)

James:-
A fantastic pure css solution to something i have been trying to do without javascript/frames for ages.... thanks a million!

One question... is there any easy way to get the scrollbar to only appear in the content area? Everything i haev tried has resulted in the bottom of the scrollbar disappearing offscreen (behind the footer)?

Thanks for getting me 95% of the way there though!
(23.06.2006, 12:31)

James:-
ahem... apologies, i have just seen the first back to basics which does what i was asking about.
Thanks very much for sharing thsi great code.
(23.06.2006, 13:00)

Jay Krasner:-
your generosity in sharing this is much appreciated. Issue: (which your code shows that you are aware of): onpage anchors do not seem to take one to the proper place in the window.
(30.06.2006, 20:05)

chro:-
is the IE vertical scroll problem been resolved?
(24.09.2006, 10:04)

Luke:-
Hi Stu, this is eactly what I was looking for! Thanks!
There are a couple of little bugs that I cant figure out fixes for though...

1. In IE6, when using this layout, my dropdown menu (where you select the specifics of an item to buy) doesn't stay behind the header when you scroll down. The dropdown box appears on top. I tried playing around with the z-index but no avail.

2. In ie5, using the mousewheel to scroll doesnt work.

Any ideas?
(08.10.2006, 15:25)

Dave:-
Love the code!!! Do you know there is a small (approx 1px horizontal area below the footer that allows body text to show through? Just thought you might want to know.
(24.12.2006, 16:16)

Dave:-
Want to clarify my last post.........appears to occur in IE6, not Firefox
(24.12.2006, 16:17)

Stu:-
Dave, fixed using a negative bottom margin.
(24.12.2006, 16:54)

Dave:-
Thanks, that's the same fix I applied. -1 works great.......once again, fantastic layout and I'll be using it for my family site. Thanks Again! Merry Christmas!
(24.12.2006, 19:46)

Tobias:-
Sorry to burst the bubble - but the 'now working with anchors' is simply not true. I had problems with anchors jumping beneath the header for a year now & tried to tackle with it more than once.
Then I stumbled over your example which seemed to get it goin' & I was all "Hail Stu - Almighty CSS-God"... but it appears I gave you credit before you actually deserved it: You just positioned that #middle anchor high enough above the actual element that is the middle of you content so that the anchor jumps correctly. That's not really "working with anchors"... :(
As I didn't get this thing solved for a year now, I do not deserve much credit either, I know. I'll now eventually resort to an ugly Javascript-solution by use of the behaviour-library. It seems to be the REALLY ONLY way to get anchors to jump correctly. *sob*
(26.03.2007, 21:21)

Stu:-
Tobias, if you don't mind it not quite working in IE5.01 and IE5.5 then there is an answer that does work in IE6, FF, Opera etc
www.cssplay.co.uk/test/basic3.html
(26.03.2007, 23:07)

Tobias:-
Basic3 is a possibility - but my client wants the vertical scrollbar at full height of the browser-window and is quite deaf when I'm trying to explain why it might be smart to do otherwise. But that's just the way clients are, I guess!
Thanks anyway! My co-worker and I have now implemented some fancy JS-scroller that scrolls down when clicking on an anchor. It's not clean, nice, accessible and needs JS enabled - but it makes our client happy because it's fancy and his beloved scrollbar is at full height... ;)
(29.03.2007, 11:45)

Stu:-
Tobias, clients eh.....who'd 'ave 'em?
(29.03.2007, 13:11)

Marco Soria:-
Is there a way to achieve this using a static width, lets say 900 px, and to align header, content and footer in the center of the screen?
(09.04.2007, 02:38)

Jeremy:-
Your style is beautiful. Thank you for the poetry.
(29.08.2007, 04:13)

Toomas Lepik (Estonia):-
Vau. Just when I had a thought to make
a beautiful page and was searching for
something like "back to basics 2", it
was there. Perfect! Keep up the good work :)
(05.03.2008, 22:04)

marc:-
Is it possible to add a background image that will stay visible for the entire site? Like one big fixed image in the middle.
(30.03.2008, 10:28)

jay:-
brilliant , i was looking this for ages, thanks so much
(30.07.2008, 14:00)

Paul:-
Great code Stu, Fixed Layout version 2 works a treat and in IE7.

Note, if using a fixed width element in the scrolling content, IE6 needs "width: 100%;" otherwise you lose scrollbars off the edge.
(04.09.2008, 05:52)

Tim:-
This is great! but.... I'm having a problem in IE7 I have my page setup so there is a left side div with the site navigation and the content area is right beside it in another div. When you scroll the page doesn't grab the entire div that contains both, it only selects the left nav div of it and scrolls that. It works great in all other browsers. Is there any known fixes for this?

Any help would be greeeattt! Thanks
(23.10.2009, 17:48)

stelios:-
great job Stu!
really on the best sides around..
Congratulations, really.
(28.12.2009, 17:56)

Shahib:-
Nice Work. It works fine even in Chrome

I have implemented similar functionality for Table. Pls have a look and provide your suggestions

www.s7u.blogspot.com
(27.09.2010, 14:16)

Aaron:-
Sorry to point this out, but this layout doesn't validate as CSS (breaks on the word-wrap property). Not a massive issue for most, but it does pose something of a problem if valid CSS is required.
(22.11.2011, 22:49)

Stu:-
This is a CSS3 style and not yet part of the w3.org validation.
www.css3.info/preview/word-wrap/
(23.11.2011, 21:43)

Julianna:-
I have a page using this for the header, however when I set up and click on an anchor point, the header disapears.
(13.01.2012, 19:39)

Chuck Baggett:-
The header and footer cover part of the scrollbar, and the scrollbar goes all the way to the top and bottom of the screen, rather than being confined to the space between the header and footer.
(04.11.2012, 01:54)

Stu:-
You need to look at other layouts such as www.cssplay.co.uk/layouts/body4.html
(04.11.2012, 08:11)

alex:-
very horrible
(17.05.2016, 21:29)

Stu:-
This is 11 years old so is not suitable for layouts today. There are much better ways to do this using the latest css styles.
(17.05.2016, 22:09)



Post

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://'

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page