Mobile Friendly Website


Doing it with style

Flexible 3Cols 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

This is because IE6 does not reduce percentage width smoothly. I have fixed this by making the right column background the same color as the container background.
(11.02.2009, 15:53)

Stu thank you for having such a useful site! :-) Wish I had found your site sooner.

I took this example and wanted change it to use background images for all 3 columns and have a border on the columns. The border worked in IE7.0 but didn't work in Firefox 3.06. Firefox was willing to display a border around an entire column (border:) but would not draw a single side border (border-left:). I found out that it was choking on the large padding/margin and that a slightly smaller one will work.

/* Firefox messes up borders */
padding-bottom: 32767px;
margin-bottom: -32767px;
/* Firefox likes */
padding-bottom: 32317px;
margin-bottom: -32317px;

Also IE7 would only expand the center column and display its background image as wide as needed for the wrapped text leaving a gap. I fixed this by changing the conditional IE style to not apply to IE7 and then adding <div style="clear:both;height:1px;"></div> to the bottom of the center column.

Now it works just like I want for FF3 and IE7. [no clue what my hack looks like in IE6].
(17.02.2009, 20:24)

How would you deal with content in the central column that just won't break? A wide table is a real problem with this layout. Is it possible to make it force the width of the entire page rather than hide content or mess up the layout. I tried an inner div with overflow:scroll, but that forces the scrollbars to show.
(04.03.2009, 08:10)

How would you make center and right column equal in size?
(11.03.2009, 03:05)

[Quote Stu] This is because IE6 does not reduce percentage width smoothly. I have fixed this by making the right column background the same color as the container background. [Unquote]
I've noticed that IE fills up the right div up to the end of the rightmost text, leaving a stripe of background colour of the container visible (coloured different for this purpose). I've been fiddling with this and googling for hacks but haven't found one so far. Do you know of a way to trick IE into expanding the right column to the end of the container div, just like in the other major browsers?
(12.03.2009, 21:15)

I've found a trick.
I've inserted a 100% wide and 1px high image in the html code of the right div. That solved it!
(12.03.2009, 22:30)

wowowwowo.. amazing website! I hope the people submitting this code are being paid well for there skills, they deserve it..
(15.03.2009, 04:44)

Only one person producing all of the demos on CSSplay and that's me, Stu :)
(19.03.2009, 14:31)

Does the 32767 number have mystical or astrological correlations (With IE for example)? I mean, may I use another number for margin and padding bottoms ? Because it breaks my layout in Chrome : One of my columns has a background image with repeat-y. With 32767 It doesn't display, with 22767 (ceteris paribus) it does...
(20.03.2009, 13:26)

TEst ing to post again as the post I did won't get through...
(23.03.2009, 14:05)

10 of 42 comments (part 4). [ « ] [ » ] [ * ]


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