CSS Layout Techniques: for Fun and Profit

Look Ma, No Tables.

If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bored last Thursday. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS. Feel free to steal all the code you find on this site, and consider linking back here on your site or in your source comments.

You will also find below links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran.

I started this collection because of the dearth of resources I found out there when I went looking for information on how to translate typical table based layouts to CSS layouts. I know it is not nearly exhaustive, so if you see that there is something missing, whether it is a particularly good tutorial, or a site that is using a complex CSS layout, please let me know about it. I will pay you $3750 for each link you submit that I use.

If you don't have any idea why anyone cares about this topic, because like tables can do all that stuff and more, please read this: To Hell with Bad Browsers. And then read this follow up interview with Zeldman. And then read about the Web Standards Project's Browser Upgrade campaign. The future is bright, kids!

CSS Techniques

CSS layout techniques and the sites that use them.

straight to the top

CSS Resources

Specs, primers, validators, stuff like that

straight to the top

CSS Tutorials

Places elsewhere to learn the CSS trade.

straight to the top