Mobile Friendly Website

CSSPLAY

Doing it with style

fixit layout 2 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

GEoff:-
Thanks you very much for all the work you put into creating these examples. This is a very clean and easy way to achieve frames. I really like the div#pad idea. It takes care of some browser problems better than some hacks I have tried and is far easier to read/edit later.
(19.05.2004, 15:34)

GEoff:-
Couple of small things to note about layout #2 in case someone else wants to learn from it. It does not validate but the fixes are easy.

div#pad2 is used more than once. Just replace the dupe ids with unique ids.

The floated divs inside paragraphs are not allowed. Move them outside the p.

The copyright entity is missing a semi-colon.

Thanks again Stuart.
(19.05.2004, 15:49)

Stu:-
Thanks for that GEoff, I hadn't noticed the validation errors, but they are all corrected now and the page validates.
(23.05.2004, 19:14)

beau:-
The "absolute" box moves in both my IE6 and my firefox 0.9; XP both.
(13.07.2004, 19:46)

Stu:-
beau, the absolute box should move within the content area.
A fixed box would remain fixed.
(23.07.2004, 17:28)

apr:-
Works only with the default windows schema... (try some other windows schema with large toolbars). If horizontal toolbar needs to display by browser (window resizing), the toolbar is overlapped by the #foot div...
(15.09.2004, 15:50)

Dave Stewart:-
Hi Stu,
Thanks for such a great site. I have been pulling my hair out trying to change the site I am designing for my golf club from frames to css. I will put a link to your site in gratitude. :),
(29.11.2004, 18:45)

Stu:-
Cheers Dave.
(29.11.2004, 19:42)

GZ:-
Inspiring use of CSS. One problem though: I can't mouse scroll in Firefox. Mouse scroll works in IE6.
(04.01.2005, 01:28)

Stu:-
GZ, this is a known bug in FF.
(04.01.2005, 07:42)

John A:-
Really annoying... I get a white box appearing in the lower right corner, only under IE. Any sug's?
http://all-inentertainment.com/home_new.php
(18.01.2005, 03:02)

Stu:-
John A, change #foot style to bottom:0; right:0; and it should be ok.
(18.01.2005, 21:00)

John A:-
Thanks. Thats what I had originally but changed it to match your fixed layout 2. I later noticed that your scroll bar extends into the header and footer sections. What would be an elegant way to right justify my footer text, but pad it right so its not crammed against the right margin? I'd also like to do the same for my image in the upper left corner.
(19.01.2005, 02:00)

Stu:-
For the image just change the absolute position of #headimg to top:20px; (or whatever you like) and left:20px; (or whatever).
This image, by the way, does not have to be in a div. You can style the image direct by putting the id="headimg" in the img tag instead.
The text in the footer should be placed within <p> </p> tags then styled with a right-margin:20px; (or whatever you like).
(19.01.2005, 08:05)

John A:-
Great. Thank you. That all worked. Can you give me an idea on converting my "get a quote" from tables to css? Not sure on the approach. I'm also wondering why the current pages look different on IE and Mozilla.
(20.01.2005, 20:28)

John A:-
Page is http://all-inentertainment.com/requestinfo.php. Compared to http://all-inentertainment.com/requestinfo.htm. Got them closer, but apparently there's some issue with word wrap within tables on Mozilla? Can you use CSS to do forms?
(21.01.2005, 02:32)

ryan@ryanbackman.net:-
It seems as if the footer can't be shorter than 40px without creating a gap below the scroolbar and bottom of the footer. This is using the scrollbar in Mozilla but not IE. Still an FF bug?
(01.03.2005, 23:15)

s-pirin:-
Thanks Stu for that inspiring piece of CSS. It's a nice "bulletproof" alternative for frames-lovin' customers! Can someone inform us how these layouts look in different MAC-Browsers? Thanks!
(05.03.2005, 18:17)

Stephan:-
Well done Stu,
Unfortunately these days one cannot assume a browser scrollbar being 18px wide. On my WinXp platform I already noticed a few px difference between IE and FF, let aside special themes that size up/down scrollbars.
(09.03.2005, 10:51)

Geoff W.:-
Is there a way to force the scrollbar to go overtop the header and footer if I change the 18px to 0px (or if the scrollbar happens to be wider than 18px)?

Thanks for posting all your work for everyone to learn from, by the way. It's been a great help!
(21.03.2005, 18:39)

Zhang Weiwu:-
Stu: You said this is a known bug in FF, can you point out the bug id or provide a link to that bug? Because I wish to track the progress in fixing the bug:)
(28.04.2005, 03:01)

Zhang Weiwu:-
Sorry for not being clear, when I talk about the 'known bug' I was mensioning "GZ: Inspiring use of CSS. One problem though: I can't mouse scroll in Firefox. Mouse scroll works in IE6."
(04.01.2005, 01:28)
(28.04.2005, 03:12)

Stu:-
Zhang Weiwu, the bug is here 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 which was due in March.
(30.04.2005, 09:06)

Kay H.:-
stu, your header image (topclown.jpg) and left-side image (sideclown.jpg) actually do not line up. I have the same problem but it is much more apparent in my case. The header image begins 18px to the left of zero (due to the right 18px absolute positioning of #head) while the left side image starts at 0. It appears easy to fix by adjusting the side image to the left or by adding 18px of length to the left edge of the top image. But I'm curious, is there a way for the top image to begin at 0 but also be shifted left 18px at the same time? Seems a contradiction but I'm a complete newbie to html/css so I thought I would ask. - - Your examples of this type of design is about the only one I could find - thank you for sharing it with us!
(25.05.2005, 22:57)

Stu:-
Kay H, just make the background image with an 18px wide left border and then set position as background-position:-18px 100px;
(25.05.2005, 23:24)

Craigo:-
Stu: Thank you very much for making this layout available. I am a beginner at css and was increasingly frustrated at how to get the fixed frame look across platforms. Still testing but it's looking good. Very very good. One question though: It appears the code's syntax varies a lot. Is this by design or does it depend on other variables, i.e. #ofPints_sipped? <grin> thanks again!
(02.09.2005, 00:16)

Ehi Akwara:-
Stu, I am trying to make this layout fixed width at 1024px for a large-format/broadsheet-style magazine. How can I apply this width without breaking it up or adding scrollbars to the wrong element (html, body or content?) To further shed light, please peek at this if you can. Thanks for all your work. I t has been a resource for me repeatedly. Truly a playground!
http://www.queencityspeak.com/
(20.10.2005, 14:05)

david_fr:-
hi,
i'm making a little site with you're script.
thank it's very great,you can see my page a :http://chartes-vitrail.david28.info/index.php?affiche=Accueil
i've got a mistake with my page guestbook (livre),
see what' appening in this drowing : http://img352.imageshack.us/my.php?image=image20hu.jpg
are you a solution to fix this IE bug ?
Thank and sorry for my english !!
(13.12.2005, 08:43)

Matthew M:-
Great inspiration! It is also possible to use position: absolute throughout to avoid * html hack. Simply position head & foot absolute left: -18px. Bonus: screen resize in IE does not push title under left div. I did a similar trick pushing down left div and got rid of its pad altogether. BTW an extra div sized in ems around title and its pad will prevent it folding under. Tested on Moz 1.6 and IE6. I wish I could test on a Mac...
(08.01.2006, 00:28)

Denis:-
I hope there is a simple solution to this situation... when I use the French language, as content, all of the accented letters are lost. In IE, the accented letters, such as é, è,ô,à, appear as empty squares. In FF1.5, they appear as question marks. How do I input French content??
(11.01.2006, 23:42)

Newbie:-
Is there a way to change it so there is max width? Instead of the width going 100%, can I limit to 1024px? I want to use a 1024*768 pic but don't want those who use higher resolution to go out of bound and not get a pic.
(17.01.2006, 16:35)

Aaron:-
After reading about it for the 10th time, I had to post. Stop asking about the FF bug... read the thread first... argh!

ps. your examples are great. thank you and keep it up.
(18.03.2006, 13:10)

Paul:-
Why are you declaring divs as display: block? That's the default styling for div; have you found it necessary for some older browsers?

Thanks for your good work~
(11.04.2006, 19:06)

Ken D:-
Stu - This is terrific stuff. Some sites (like mine) have three navagational elements: one in the headder, another in the left sidebar, but also a third sub-menu for a page. Is there a way of putting this third nav. element into a fixed element so the contents of the page scroll underneath?
(12.08.2006, 10:22)

Rob F:-
Hi Stuart, I remember you from Portland Portal days. This is a great site - your best yet. I am now inspired to update my tawdry old web site! Cheers.
(27.09.2006, 17:49)

Stu:-
Hi Rob, it's a pity that Portland are not what they used to be :( But I am pleased with this site and it is doing quite well :)
(27.09.2006, 19:32)

Rob F:-
Using this layout I've done a test page for my current home page at www.colin-forbes.co.uk which is at www.colin-forbes.co.uk/cssplaylayout.html
But I've noticed that when I float an image to the right I lose 18px off the header and footer. I know this is because I've failed to understand the CSS box model and inheritances (!), but how can I fix it?
Thanks
(27.09.2006, 21:07)

Stu:-
Hi Rob, If you mean the 18px right margin then this will be there whether you have right floated images or not. This is a gap for the scroll bars when necessary.
If an image is floated right then it will be spaced off the right side by this 18px gap.
(27.09.2006, 22:38)

Jeff Watts:-
Hi Stu - great advice. I came here looking for a method to load the links in the 'nav' div into the 'words right' div. Framelike, but without using frames. Only CSS, in order to keep the same nav bar across multiple content. Is there a method for this?
Jeff
(20.10.2006, 03:31)

Tony:-
Hi Stu, thanks for the great layout examples.
I'm on my from tables to CSS and there's a lot to learn.
I tried to extend the 100% height layout to one with 100% width. Bit I can't get it to work. Sometimes it works in IE but breaks in FF. Maybe I'm trying to do something that isn't possible. Here's a picture what I want to achieve:
www.oosterhoff.nu/pws/images/Layout.gif.
Is this possible and can you give some hints how to achieve this?
Thanks!
(20.10.2006, 08:37)

Suze:-
You are the God of CSS!

Thank you so much for your never-ending help :D
(20.11.2006, 18:02)

Joseph Thayne:-
I am not sure if I need permission to use this layout, but I would like permission to use it on my site. I am creating a community for free church sheet music and would like to use this layout. Thank you.
(04.12.2006, 17:51)

Stu:-
Joseph, the layout styling is free to use with no restrictions, all I ask is that you don't copy the images as well :)
(04.12.2006, 18:45)

Joseph Thayne:-
No problem. Thank you.
(04.12.2006, 19:46)

Sara:-
Hi, is it possible to adapt this layout and code for a site I'm working on? :) Thanks!
(12.01.2007, 05:51)

Stu:-
Sara, all my layouts are free to use as you wish, just replace the graphics with your own.
(12.01.2007, 08:48)

Sara:-
Thanks very much, just wanted to double check! :)
(13.01.2007, 03:05)

Myra:-
Stu,

You're the best. I've used your menus before (and always credit you on the websites). Now I'm looking at your layouts...

I love the fixed layout 2, with the stationary menu areas and the scrolling content section.

Question: Is it possible to have layout 2 scroll both vertically (as it now does) AND horizontally?

Thanks very much.

Myra
(24.03.2007, 22:46)

Bruno:-
Hi Stu,

my problem:
1. I do have a page with a fixed header
2. there is an anchor on that page with padding-top = height of header
3. FF puts the anchor directly beneath the header and jumps to it - that is what I want
4. IE 7 seems not to recognize the padded anchor, jumps to top of page, under the header

How can I force IE 7 to work like FF?
(12.05.2007, 22:56)

Robin:-
Someone on this comments section was struggling with a center layout. I have cracked it.

View: www.cleanroomtape.com
(20.07.2007, 01:14)

lex:-
very good layout. how did you cut out the picture on the right size for the main frame?
greets from holland
(24.07.2007, 09:01)

Robin:-
Iex:

Not sure I understand the question? Could you elaborate a bit? Tks.
(25.07.2007, 00:16)

Robin:-
Iex:

Perhaps you mean the fixed background? It is 1430px wide by 1016px tall. Here is the process I used to determine the size:

I researched current monitor resolutions and found that only about .78% of users are surfing at 1600 x 1200 resolution - so I set that as my target size since I am assuming a few years before resolutions increase beyond that. I then reset my own monitor to that res, took a screen shot of my browser fully maximized with the sidebar on (I use Mozilla) and copied the screenshot into photoshop.

I carefully sliced away the browser gui and voila! I had my background image size.

Hope this helps.

One other thing, I was noticing a problem with the css I used to center the content areas in IE 6 - a wierd, random jumping effect, so I found a different solution, tested it, and it is now posted at the URL above. Works perfectly in the following browsers:

PC: IE 6, Moz 1.7.12, Netscape 7.1, Opera 7.23
Mac: Safari 2.0.3, Netscape 7.2

Thanks to Eric Maziade over at www.inthemaze.net for researching a far superior css horizontal centering method than the one I was using previously.
(25.07.2007, 02:09)

Jo:-
Hi Stu,
I would like to say thank you for sharing your work here, and hope to see more in the future when you have available time.
I don't currently have any questions, but if I do I will come again & hope you will be kind to assist :)
cheer's.
(30.08.2007, 12:50)

sophie:-
hi stu,
I'll try your css code, tell me the javascript at the end is for what?
thanks
(19.09.2007, 08:37)

sophie:-
me again
what's size of the background picture is the best to apply the code someone said that 1430x1016 px is well what's your opinion?
thanks for answer
(19.09.2007, 13:15)

sophie:-
hi, everything works how do you get the white background for the content?
thanks
(20.09.2007, 10:23)

Lynne:-
Hi Stu,
What a great inspiration you are. I have been trying to get the 'back to basics2' (IE not required to be in quirks mode) working on a site I have been updating. I had an issue with the center content section being pushed up under the header in ie6. I adjusted the css to have the content start 100px from top (top:100px;). Also had the left nav start 100px from top. I'm wondering if anyone else has had this issue? And, if so, what they did or am I the only one who has this issue. Anything wrong with my approach to correct the problem?
Thanks and regards from San Francisco.
(07.11.2007, 21:14)

Ellen:-
Hey Stu & Kate,

I almost know your fixed layouts by heart, although I do not understand them fully. But using layout 3 I discovered that it is not fixed in IE7 at all! Enlarging the font let the foot disappear. Can it be fixed? I hope you can fix it !
(06.03.2008, 21:22)

Arie:-
Stu, you use an IE-hack on your css-page, in order to separate non-IE (position: fixed) from IE (position: absolute). But you can use 'absolute' for both IE and non-IE, see
www.dynamicdrive.com/forums/showthread.php?t=31661

Arie Molendijk.
(14.05.2008, 23:44)

Eben:-
Hi,

Great work on the layouts!

Just a quick question, I'm using fixed layout 2 and trying to add a RIGHT nav bar, like the one on the LEFT.

What is the most elegant way of doing this?
(25.03.2009, 17:34)

AA:-
Thank you for posting this and trying to help us learn it.
(27.04.2009, 02:52)

May:-
Wow, what a lovely piece of work you have here, Stu. I've been running dry on ideas for a new website template for a little while now; would you mind if I took some inspiration from this one? Of course, I do not mean that I will steal it or anything of the sort, but it is lovely idea to have an almost frame-like layout, and I will be sure to link back to you, of course.
(30.03.2011, 05:31)

Stu:-
This layout is free to use as you wish.
(30.03.2011, 09:25)

Mint:-
Hi stu,
Can this be use in iphone page?
(13.04.2011, 01:48)



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