Mobile Friendly Website

CSSPLAY

Doing it with style

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

Liz:-
I love you, I've been trying to do this forever, but with only two center columns - easy enough to change...THANKS SO MUCH
(11.06.2004, 14:28)

Mike:-
I didn't want to use frames for a PIM-style web-app interface, and was about to toss myself out the window, but someone at CSScreator.com's forum sent me a link, and aside from presenting me with something very helpful, you've really opened my eyes to some very amazing, practical, and, best of all, validating methods of doing things that used to require workarounds or were impossible. Thanks.
(11.07.2004, 22:24)

Stu:-
I'm glad I stopped you throwing yourself out that window :) Pleased to help.
(11.07.2004, 22:36)

maghalat.com:-
marvelous
(17.09.2004, 09:39)

Manuel:-
When I put the line
<?xml version="1.0" encoding="UTF-8"?>
into my document, my browser says
Parse error: parse error, unexpected T_STRING in /home/w ww/doc/668 0/~~mydomain.de~~/ww w/news/work.php on line 1

when i leave it out, the document doesn't work properly in my IE. what can i do? do i have to modify the httpd.conf or something??

Very thank you!!
(22.09.2004, 20:24)

Stu:-
Manuel,this is a known problem with php and xml. Both start with <? and in your case the first line is treated as php and causes an error.
The way round this is to make it into a php line to print the xml declaration.
<?php echo "<?xml version="1.0" encoding="UTF-8" ?>n"; ?>
This is well documented on the web so if you are not sure have a quick search on Google.
(29.09.2004, 14:27)

BW:-
Exactly the layout I was looking for, great! Though I have to admit I'd rather see a solution without the XML prolog, because it warps MSIE into quirksmode *bummer!*. My quest continues, but thanks for this insight and direction!
(07.04.2005, 14:22)

EdzoHogusava:-
Respect man! This help me a lot in building my script interface - exactly as I planed!
(17.05.2005, 23:08)

HerrFlick:-
Oh I can't begin to thank you enough :), I was about to go with a javascript eventhandler solution :S
(26.08.2005, 15:59)

craigo:-
Stu, thank you for your work. I've been trying to eliminate the footer whilst keeping the "down arrow" on each of the columns' vertical scroll bars. Works fine in FF & Mozilla but disappears in IE 6. Am I missing something?
(15.09.2005, 05:44)

Tim:-
Stu, gorgeous work–truly inspiring. As a Mac user, you've given me hope that IE6 can be tamed and conquered! Thank you for sharing. Two questions: 1. I notice you have a different technique for putting IE6 into quirks mode in this source code when compared with the code here: http://www.webreference.com/programming/css_frames/index.html Is one better than the other? 2. Is there any way to get anchors to work within the the four column, fluid layout? I've tried, but without success. In hopes you'll have a minute to reply–thank you!
(27.09.2005, 19:42)

Stu:-
Tim, to put IE into quirks mode you just need to add a line before the doctype so either method will work, but I suppose that the xml line is more correct. As for anchors in the layout, I didn't realise there was a problem. They should work within each column but not across columns.
(28.09.2005, 08:54)

Tim:-
Stu, thanks for the reply. Your research (and generosity!) is proving essential in putting together the final layout for a project I've been working on for over a year. This may interest you:
http://www.hypergolica.net/web/public/fluxDemo.htm From top to bottom: For the box in the header i've use the tantek hack, but you do something instead, right? It has something to do with * html trick, but I've never fully understood that. I used your list menu but when I had it centered, it didn't work in IE 6. I'm sure it has something to do with the fact that I've got it in side a div that is inside a div etc. ? Click item 5 in the menu it will move down to a test anchor. I tried the same thing in a replica of your "playground CSS" model and the "4 column sushi layout". Didn't work. Biggest problem is the three columns. I had to float the third column right as I couldn't get it to work otherwise. While it works on Safari, Firefox and IE 6 do not like my percentages for widths and margins. Is there a "box model" hack for IE 6 when you use percentages instead of specific measures? I'd be most grateful for your insight. Best, Tim.
(28.09.2005, 13:49)

Tim:-
Stu: after an entire day of Googling, reading, coding and debugging, it would seem things are now under control. Of course, sloppy code will get you no where, and there was a bit of sloppy code in the previous example. I moved from the Tantek hack to the Tan hack, also fully understand now the meaning of * html etc. and used that for the margins in the three columns. still an odd effect in third column in Firefox 1.0.3 on Mac. Here's the latest: http://www.hypergolica.net/web/public/fluxDemo2.htm In any event, I wouldn't have made this climb without your help. Thanks again.
(28.09.2005, 22:27)

DeadMeatGF:-
Man - I've just stumbled across this layout and it demonstrates EXACTLY the technique I've been after - one that all forums I've posted on have said is impossible - especially in IE.
Can't wait to dissect it and adapt it to my nefarious needs ... and you'll get a credit on the page :)
(12.11.2005, 00:49)

Ultraniblet:-
Thanks so much for making and maintaining this site Stu. Pure class. I hope whoever you work for pays you enough!
(14.12.2005, 20:07)

Linda:-
Stu, this is a fantastic layout. I am starting a publishing web site and have been looking for something like this. I will definitely give you credit, if you don't mind me adapting your code. I didn't see anything about being able to use the like, like you have on the other pages of your site.
(11.01.2006, 01:11)

Stu:-
Linda, you may use any of my layout styles, but not the images as they are copyrighted and you would need to get permission from their owners. Good luck with your site.
(11.01.2006, 08:06)

PRom:-
Bien, bastante interesantes los ejercicios con css
(24.04.2006, 11:02)

Terry T.:-
I could use a way to make any one of the columns in the fixed layout version 4 a specific pixel width and not a percentage so I can insert a dynamic calendar that needs to be a fixed size.
(27.05.2006, 17:58)

Jansie Blom:-
hi. I recently started building websites. 4 months ago i didn't have a clue how to build one, or anything about html, not to even mention css. but we saw a gap in the market, and i like the idea of jumping in the deep end and pretending to swim. so we started The Big Fish website development and marketing company. now, it seems, i've come across the lance armstrong of web design. 0r better suited to where i stay (Jeffreys Bay in south Africa), the kelly slater of web design. i am dying to use your code stu. but i see it's got copyright on it. does this mean i am only allowed to download your sites to my hard drive and drool? i had NO idea css is so powerful and versatile. may your answer be favourable to my ears. thanks for the coffee.
(14.06.2006, 12:42)

Condor:-
Reply to BW:

You can create this layout wihtout putting IE into quirks mode by using expressions.

See: www.fu2k.org/alex/css/frames/standards_mode
(19.07.2006, 15:28)

Michael:-
Mazel tov Stu. Why do you publish your code in a line by line way (meaning opened and closed on same line # usually) ?

Thanks for a ton of really interesting ideas.
(22.09.2006, 13:31)

Stu:-
Michael, I tend to publish the styles in a line bcause I find them easier to read and it saves all the scrolling to find what you want.
(22.09.2006, 13:40)

PaulL:-
Well done on the fabulous reference site.
I am trying to use your 'fixed' layout version 3 (body4.html) but seem to be having a problem with anchors in the content section where the header disappears.
www.moondrops.co.uk/n.html#mid
shows the problem
www.moondrops.co.uk/n.html
shows the correct layout
If you or anybody else has any ideas Iwould really apprecite it.
Thanks
Paul..
(19.12.2006, 15:55)

Jeffrey Bollman:-
Hello Stu. Great work again.

I seem to be noticing a theme regarding printing of single column flowing text pages vs. multi-column flowing text pages.

The single column pages print (& print preview) fine, however, the multi-column pages seem to stop on page 1.

Am I missing something... is there some additional code needed to allow the printing of the complete text?

Thanks for the assist / suggestions.

Jeffrey Bollman
(29.01.2007, 18:39)

Stu:-
Jeffrey, all layouts of this type will have problems with printing using the 'screen' css.
What you wil need to do is produce a separate css file for 'print'.
This will allow you to specify how the content is printed, what is printed and where page breaks will be made.
(29.01.2007, 19:24)

Jeffrey Bollman:-
Stu,
Thanks for the tip.

Obviously I was looking for a one-size css file that fits all. That is definitely *not* my solution in this case.

I have already started my endeavor to create an appropriate "print-my-page-nicely.css" file.

Once again, I appreciate your time and efforts to help resolve lots of "little" issues that come up for many folks out here.

Jeffrey Bollman
gmt -6:00
Lincoln, Nebraska USA

(must be time for supper at your house!?!)
(30.01.2007, 17:41)

Dave Bergschneider:-
Hey Stu,

I've been playing with this layout and seem to have hit the wall with the borders method.

I'm wondering if there is a way to do this layout without the larges borders for IE7 & FF (disregarding IE6 of course)? The example I have works correctly in FF.

www.truimage.net/layout.html
(12.04.2007, 20:04)

Dave Bergschneider:-
I managed to figure it out. Not sure what I did differently but it works now.
(13.04.2007, 16:50)

KVAKOS:-
Hello Mr. Stu !
I´m wondering that CSS is so powerfull I can´t even imagin. I have know before a few tricks but this website has a tons os usefull tricks. I was especially surporised that a rollmenu is possible to construct also for IE without usage of Javascript. I was convinced that IE can only make rollmenu with using Javascript. I came from Czech Republic and I thing that nobody in my country knows about it.
Thank you a lot for this website
(10.05.2007, 23:44)

Justin:-
Dear Stu, is there a way of centering the multi-column layout? (e.g. add a wrapper div that uses margin: 0 auto to do the centering)? I have tried all sorts of stuff, but either the 4 columns vanish, or the centering doesn't work. Do you have any ideas?
(12.10.2007, 23:03)

Rene Ros:-
Unfortunatly this layout doesn't work with iPhone's Safari. And with printing a page with FireFox 3.6.2 only the first page is printed.
(28.03.2010, 12:47)

Eli:-
Thank you very much! The
html {
height:100%;
max-height:100%;
[..] }
helped me a lot, I was missing that point and wondering why the f*** things wont work within my page.
(19.08.2010, 16:11)

Bell:-
Hi Stu, thanks for the great sample! I was wondering about one thing, but didnt find a solution: Would this also be possible without the absolute-positioning of the columns? Because, if you resize the page to something very small, the header is "over" the content of the pages.. Would be nice to have a possibility to make the columns stick below the header, no matter what size the header actually has.
(11.01.2011, 18:01)

jayjay_seal:-
Hey Stu! Thanks for the /layouts/body5.html template... it made a difference in understanding CSS better! ;-)
(08.11.2015, 11:46)



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