Site not Updated!!

This site hasn't been maintained or updated for a considerable number of years and is just left in place for historic reasons.

Many of the techniques discussed here are not relevant these days and use out-dated techniques not applicable to today's web design structures.

The demos may still be of interest as they show various techniques but most of these demos were created before mobiles existed so aren't relevant today. They do however show ingenious methods (hoops) that we used to have to jump through to get browsers to behave.

If you want to see more modern demos then please follow me on codepen instead.

Welcome to a site dedicated to hosting fully supported examples of CSS implementation. Within the tutorials and FAQ you'll find examples of how to create CSS based page layouts, style your documents and organise your code. This site also exposes, then shows you how to fix, many of the bugs and foibles of the most common browsers.

Even though this site is currently undergoing a facelift it is fully functional. You can still visit all of its most popular components including the FAQ tutorials (which are not meant as a lesson in aesthetics), the three column Demos (still valid today even though they were done 2 years ago) and various examples of how to use css to add content to your site.

Be aware that some of these techniques are quite advanced and require a reasonable understanding of CSS. Consequently if you're relatively new to CSS taking a glance through the tutorials should give you a good idea of whether you're ready to start using them. Again, none of the examples are meant to be pretty and I have spent no time beautifying them (as you can tell). Indeed I seem to have gone out of my way to make them as ugly as possible (it's a good talking point).

Some of the demos listed below are simply experiments without explanation. However, as many people have found them interesting part of my site redesign plan includes documenting them fully. If the particular example has not been fully documented yet please check back later and if you intend to forge ahead unassisted, the examples are at the least well organised and with some perseverance will, I hope, prove helpful.

The age of the demos listed below vary greatly and going through them to sort out the wheat from the chaf is another item on my to-do list. To help direct readers to the recently updated and documented demos I have placed them in little beige boxes. Working my way through all the demos though is going to take some time!

3 Columns

Border Effects



Equal Columns


Older Stuff Follows

These are the original links to older articles and demos. I am working through them as time allows updating them to a more fully documented form. They have been left here for now so that they are still available while I work on them but use with care (especially the fixed positioned ones in IE6) as some are just basic ideas for experiment.

Useful Links

^ Back to Top ^