Mobile Friendly Website

CSSPLAY

Doing it with style

Three cols mk2 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

Mike:-
"However, the following example IS even simpler and works in IE6 (with a fix 'cos IE6 gets it almost wrong), Opera 7.23 (the only browser to do it right) and now also in Mozilla/Firefox."

Safari 1.2 and Opera 7.5 display it identically.
(14.06.2004, 13:04)

headsfromspace:-
Well done. These designs are blowing me away.
(23.07.2004, 21:13)

stephen:-
Really impressed, and I wish I had found your site late last year when I needed it most.
(09.08.2004, 06:37)

walter:-
n i c e ... can you adopt this design to have the 3 columns no wider than 720 for eg?
(15.09.2004, 23:18)

Stu:-
walter, this can easily be achieved by wrapping the whole lot in an outer div 720px wide.
www.stunicholls.myby.co.uk/layouts/centered.html
I have added a border to the outer div to stop the div from vanishing off the left of the screen when resizing below 720px wide in FF.
(16.09.2004, 13:41)

matt:-
Hi & thank you for your designs! - I was trying to adapt your design for creating a vertical line - 1px wide (as the middle column). But making the column small, breaks the design: Either left and right columns won't stay beside eachother or the beautiful "largest column defines design height" stops working. Do you have any idea how to achieve an "auto-height" vertical line?
(25.10.2004, 22:03)

Stu:-
matt you could use a background image in the center column. This need only be a 1px x 1px image repeat-y.
(25.10.2004, 22:23)

Morten:-
Hi Stu. Nice work with the design. I have a problem though. See, I wanta two column design (menu and contents) plus header and footer. I want the background image of the menu (left column) to extend with the contents column. How would you go about doing this?
(29.10.2004, 12:45)

Morten:-
Nevermind - I found another way. Thanks anyway. :)
(30.10.2004, 09:59)

Lou:-
Stu, could you make a fixed footer that stays at the bottom of the page regardless of the amount of content? By the way, awesome job!
(08.04.2005, 21:14)

Dafydd:-
Both the trhee-column examples work a treat in Apple's Safari brwoser, tested with Safari 1.3
(01.05.2005, 19:03)

Omer:-
What if I need a background image in the left column? Should I add extra nested divs inside it?
(02.06.2005, 07:45)

gunzip:-
Hi Stu, I really like your works. I wrote this
before realizing you already done that http://gunzip.altervista.org/docs/less-wrapper.html
It's a bit tricky but elastic/progressive and has a min width with exploder 6 too. Sorry for the comment spam feel free to kill it :)
(07.06.2005, 13:01)

Andy:-
Hi Stu - I am in awe of these pages. I adapted this 3 col layout. It works in Omniweb, Safari, Opera, Firefox, Camino and iCab perfectly. Even works in IE Mac 5.2 (Urrghh!) But in IE 6 on PC, the centre column always starts to display AFTER the lowest content of either side column. I'm tearing my hair out! Do you have ANY idea what might cause this to happen please? (I'm using the snazzy boxes too - awesome stuff). Thanks
(10.06.2005, 15:11)

Stu:-
Andy it is probably the faulty box model that is causing the problem. In IE6 the center column is too wide to fit the gap. Try reducing the center width to see if it moves into place. If it does then you need to switch IE6 into quirks mode or hack it to set a different width.
(10.06.2005, 16:58)

Andy:-
Thanks Stu. After several hours of hair tearing I found the main culprit. The div I had created for the centre I had set to width 100%. Reduced to 98% then it displays more or less as it should. At least from here I should be able to figure the rest but you just confirmed it for me. Thanks. Now for the dumb question! What do you mean by 'switch IE6 into quirks mode'? And a very bigthank you for both the CSS AND the help/advice. Both appreciated.
(10.06.2005, 17:15)

Stu:-
IE6 has two modes of working depending on your !DOCTYPE. If you use the same doctype as I do then it will be in standards compliant mode and have the correct box model. IE5.01 and IE5.5 have faulty box models no matter what the doctype. To switch IE6 into quirks mode so that it matches IE5+ just add <?xml version="1.0" encoding="UTF-8"?> before the doctype declaration making this the first line of your code.
(10.06.2005, 17:22)

Andy:-
Thanks again. I'll give that a try. My document is actually 1.0 Transitional although thinking about it I'm not sure why it's not 1.1 - I'll investigate! Actually, the W3C CSS validation site threw out an error with your * html statement as it happens. I see I need to learn a lot more but I have to say this is my first brush with CSS and there is no going back! Thanks for everything. - Andy
(10.06.2005, 18:45)

Andy:-
Additional: I get a parse error with that line you supplied me. I'm going to have to get my 7122493
(10.06.2005, 18:49)

Andy:-
Just to let you know Stu I think I've solved the problems. Seems that IE doesn't much like the use of 'margin' statements in that centre column so a little work with padding instead seems to have cured things. Again - thanks for the CSS and thanks for the advice.
(11.06.2005, 10:35)

Dave Evans:-
Excellent resource, Stu. Have checked out bluerobot, glish, etc and before I try the 3-col setup, does the latest version still blow up netscape 7?
(29.06.2005, 18:44)

Stu:-
Dave, I believe the latest version of NN7 is ok but I now have NN8 installed and this does not have any problems (it emulates Firefox and IE6).
(29.06.2005, 20:36)

RolfD:-
Hello,

Just checked 3cls2 demon. It ALSO workd with NN 7.1 properly!
(15.07.2005, 13:24)

Len McGrane:-
I LOVE the simplicity of what you've done here, Stu. But my client is not so happy. I've floated images onto the right hand column on his site (http://www.alphatechnologiescorp.com/build/) and while they view perfectly in IE6 etc when a page is printed the images on the right move over into the center column and obscure the text there. Any fix? Did I do something wrong?
(28.07.2005, 00:38)

Stu:-
Len, if you check the print preview you will see that it is squashing the screen horizontally. You get the same effect if you try resizing the browser window. The only way to avoid this is to have a printer.css that either resizes the image to make it smaller or removes it altogether. By the way, have you looked at the web site in Firefox?
(28.07.2005, 08:48)

Len McGrane:-
Thanks for that, Stu. I found out about printer.css and made the images disappear. Haven't looked in Firefox, but I did look at another site of mine in FF and it was horrible! Not sure what to do about that. Anyway, thanks for all your help -- especially your menus-with-an-<a> that I now use all the time.

Len
(29.07.2005, 02:06)

Trevor:-
Your three-column pages are very nice. Is there any way to have a three-column design, each column having it's own borders, in which all columns appear to be the same length (the bottom borders of all three columns even against the footer?
(24.08.2005, 01:39)

Stu:-
Trevor, not with this method. However there are several other sites that have demos of this. You could try http://www.tanfa.co.uk/css/layouts/flexi-floats-3col.asp
(24.08.2005, 11:33)

mike:-
i need help making a page layout in xhtml and css...i need some major help...email me if you are willing to help...for free?

Masterchief3k@gmail.com
(01.04.2006, 09:34)

Tom:-
This is simply beautiful. Nothing could be finer.
(04.04.2006, 20:56)

John:-
This is absolutely the best listing of examples that I have been pointed towards. Thank you for posting these.
(27.04.2006, 20:01)

SIMON:-
I would just like to say THANK YOU Stu. This is by far the most helpful and inspiring website on CSS I have ever seen.
(02.05.2006, 06:04)

Morkster:-
Stu...all I gotta say is..."Thanks!".
(21.06.2006, 23:34)

Mark:-
In IE 6, is there anyway to enforce a min width in the center column? In Firefox, the center column stops compressing at some point, but IE appears to keep crunching?

Many thanks. Love the site....
(01.08.2006, 04:22)

Stu:-
Mark, you couls try the min-width hack demonstrated in the 'Boxes' list www.cssplay.co.uk/boxes/minwidth.html
(01.08.2006, 08:03)

Art Ketcham:-
This is a beautiful template. I'm glad I found this. One IE 6 bug I discovered was that when you decrease the width of the window by resizing it, once the center column is smaller than its contents can be reduced to, the contents of the right column will be forced over onto the center column, and will force the center column's content down. It would not be an issue if MSIE supported min-width, I guess.
(15.09.2006, 03:26)

Art Ketcham:-
Opps, just noticed the post before mine about min-width. sorry about that
(15.09.2006, 03:27)

Roy:-
Doesn't work in IE7
(26.09.2006, 22:10)

Stu:-
Roy, does too :) well with a couple of conditional comments for IE instead of the * html hack.
(26.09.2006, 23:20)

devPlumber:-
Could you please post the conditional comments necessary to make this owrk in IE7?
(06.10.2006, 13:45)

An Ning:-
I am sure you are a very kind old man,Thanx a lot!
(16.10.2006, 18:36)

Mark:-
Thanks for this great site, I've learned so much from it!

I was wondering if you have an example which combines this Three Column layout with your 'Fixed' layout version 3.

What I'm trying to achieve is a three column layout with equal column heights AND a persistent header and footer with content scrolling in between.

Thanks again,

Mark
(07.11.2006, 18:21)

Mark:-
I missed mentioning something in my previous post:

What I'm trying to achieve is a three column layout with a liquid center column and fixed width left and right columns, all equal height, and with a persistent header and footer with scrolling in between.

Sorry 'bout that!

Mark
(07.11.2006, 18:31)

Paladin:-
hmm can't find my previous post. I get all manner of consistency issues with this that centre around using tables in the middle - by the way in the css code #center isn't defined, so I can't see what referring to it in the example html file achieves at all! I get the middle column not displaying anything until the others have finished their output but don't understand your fixes / hacks, changing the xml bit sends it even more up the wall - think I'll revert back to my table layout after all as this has done my head in for too long now.
(08.11.2006, 23:58)

Stu:-
Paladin, I think that you are mixing up the two examples. This one doesn't use #center on the html or CSS. The 3 col example before this one has #center in the CSS and id="center" in the html.
(09.11.2006, 07:54)

ashnur:-
i'm not sure, but correct me pls if i'm wrong: when you set any float the display will become block even if you try to set it inline....
(09.11.2006, 08:38)

Stu:-
You cannot have an inline float, only left or right. The float will occupy whatever space you define using width. Floats can and will 'float' outside of containing divs.
(09.11.2006, 10:11)

ashnur:-
this is obvious. my question was about those display: inline; rules. i think they are useless as when you set the float property(other than none), the display will become block. i should've test the layout, but I can't, yet.
(10.11.2006, 12:52)

Mark:-
Hi Stu. I've been trying for about a week to get this liquid three column layout working with a fixed header and footer based on your 'Fixed' layout version 3, but it seems to me now that because one layout relies on relative positioning of the columns and the other requires absolute positioning, combining the two just isn't going to work. Then again, I may just be thick! Any thoughts?
(11.11.2006, 12:59)

Paladin:-
Aha! Yes you were right of course Stu about my mixing up of the two examples - the site almost does what I wanted it to do now. I do have an IE only bug in that when the focus is on left the background colour for the middle changes until it gets focus back and I scroll up and down screen once or twice. I tried /* ing out the #container style that appeared to be causing this but it still isn't playing ball.

Otherwise, fantastic stuff!
(14.11.2006, 00:24)

Anni:-
Hi
I POSTED THIS IN THE WRONG COMMENTS SECTION BEFORE, SO SORRY TO REPEAT-

I really think your site is wonderful and have just completely redesigned my site using a number of your examples.
Unfortunately, somewhere along the line, probably because I am using so many different bits, a problem has occurred in IE6 and I just can't work out how to fix it.
When the page first loads, (using this 3 column layout) the column on the right jumps in to the left a bit and the left column disappears! It fixes itself as soon as I hover over a link, but it's such a shame....
Firefox is fine.
As well as this layout I'm using opacity rollovers, show me some more, capitalise first letter and another css rollover menu.

Is this enough info for you to offer some help? Or do you need more?

Also, having read Paladin's post from 14th November, the issue I'm having does seem very similar to the issue he/she describes...

Thanks

Anni
(28.11.2006, 22:59)

Anni:-
Hi,
just to update, I managed to "fix" the ie6 bug with the holly hack on #container.
For ie7 I added height: 1%; to #container and, touchwood, all seems well.

Anni
(29.11.2006, 12:32)

Tudor:-
Genuine CSS mastery... you're great!
Nevertheless, with the 3cols layout, I get the strangest bug (naturally, with IE 6), that makes me wanna abandon webdesign forever: I put some divs inside de right column, setting their background-color and color to whatever, and while it all shows as it is supposed in Firefox, in IE the background-color of these divs DOES NOT appear as set - it's like the divs were transparent. Just sometimes, the background-color becomes apparent after I scroll open a CSS submenu over the divs (?!), only as a glitch, then it dissapears.Makes me go crazy, because there is absolutely no apparent reason for that bug to occur... Any idea, please? I didn't provide the code but i'll be happy to if you want. Thanks in advance.
(11.12.2006, 17:51)

CSS_Newbie:-
How would you best set this layout so that it is centred in the page and has left and right margins?

Please help!

Thank you in advance!
(24.01.2007, 12:59)

Don't-Be-Swindle:-
Hi CSS_Newbie.
All you have to do is to pack this layout in another div-container with such styles.

#wrapper {
width: /*type here the value you need*/;
margin: 0 auto;
}

<div id="wrapper">
...
3cols layout
...
</div>
(29.01.2007, 15:50)

Paladin:-
Paladin:-
Been using this for a while and it works wonderfully for self-developed pages. But, when trying to include anything like PHPBB.x or Simple forums the middle/content layour goes ape and doesn't start rendering anything until mid-screen, from there it then scrolls all down the page - of course this is in IE 7, in Firefox no problem at all.

I have used the "<!--[if IE]>
<style type="text/css">
#container {display:inline-block;}
#left {width:197px;}
</style>
<![endif]-->"
trick but this makes no difference.
(24.03.2007, 11:42)

Paladin:-
Anyone got any ideas about the above mentioned bug as this has been an on-going thing for many months now and I don't remember seeing a fix posted?
(24.03.2007, 13:06)

hamy:-
stu-
is there any way to make the the left and right columns hold images? i have a 3-col layout w/o header or footer that i would like to have the left and right be container images that repeat-y for the entire length of the page. i cant seem to find a way to do this with css
(13.06.2007, 23:53)

hamy:-
stu-
so you know, i finally got it. if anyone wants to see, the site is currently at 129.59.129.204
its still in development, so go easy. basically i just wrapped my entire page in two divs, set each to have a background image that i wanted, and then my main div has margins equal to the size of the background images in my two spacer div's. it was pretty easy, actually

so much for 4 hours
(14.06.2007, 01:54)

Joe:-
Stu
Your work is awesome! I've searched your posts, but no luck finding this issue. Menus work great on a demo page, but when I put into a copy of my homepage, I lose the menu when I cross from the menu div into the content div. What am I missing?
(11.09.2007, 18:23)

Joy:-
I really like this 3 column layout, although I guess you could achieve the same thing other ways (that you've shown me!) if you don't need the "all column heights equal" bit.
The browser bug I see has to do with the colors. In IE6, when I set the left and right columns to transparent, it renders it using the text color! So you can't see the text, although it's there. In Mozilla, you get the same background as the container, which seemed correct to me until I tried it on IE7. IE7 treats transparent as totally transparent and shows the page background color, ignoring the container background color.
Now I'm not sure which one is correct, but since what I wanted was to see the page background image, not a color, I'm left with IE6 looking very different than the rest. Not sure if previous versions would have the same problem, but probably.
(15.09.2007, 14:42)

MarkP:-
Dear Stu,
Thanks for a wonderful website. I've read about the "CSS Holy Grail" solutions on www.alistapart.com/articles/holygrail including the "wrapper-free Holy Grail" and I find they all fall down to some extent when browser windows are resized. I'd greatly value your opinion on a relatively simple solution that works for me at www.markpreston.co.uk
(11.11.2007, 08:21)

bla:-
this site is incredibly confusing
(02.01.2008, 02:29)

Claire:-
I've been visiting and learning a LOT from stu's awesome CSS demos for a couple of years now. I have "integrated" my web students into vising this site regularly and asking for permission to use the pages.
This is my production of the 3-column page using a wrapper and a few other of the great demos from this website - if you care to check it out. the whole CSS is embedded on the page. It's only a template to show my students how to do CSS. lynx.tygerz.com/new_threecolumn.htm
(12.02.2008, 17:49)

mohdi:-
what to do if i want to make it fixed & centered? anyone can help
(27.01.2009, 18:46)

GW:-
It is a nice and easy to use template but one of the things about these types of layouts I find rather annoying is that the left and right columns are given a priority over the main content column.

It would be better if the content layer is prioritised before the left and right, so that when visited by google etc it is the content that is seen and indexed before the left and right - do a view of the template without css and you will see what I mean.

Cheers

GW
(13.01.2011, 04:03)

Mike N.:-
This does NOT work in IE8, the only browser that I have tried it on. If you click the right column first, the footer does not float down. If you click the header, the 3 columns are minimised but the footer does not float up.
There are plenty of versions of 3 col layout that do work correctly.
(04.12.2011, 19:10)

Stu:-
This was produced long before IE8 came on the scene. It is obvious that it does not work in this browser so do not use.
(04.12.2011, 19:20)



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