Mobile Friendly Website


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}

Post a comment

Current posts

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)

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)


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...


(28.11.2006, 22:59)

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.

(29.11.2006, 12:32)

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)

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)

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
(29.01.2007, 15:50)

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;}
trick but this makes no difference.
(24.03.2007, 11:42)

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)

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)

10 of 68 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