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.
3 Columns, The Holy Grail of page layouts — The most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement. I first saw this layout at dynamic ribbon device and have since learned that the sweet CSS came from Rob Chandanais of BlueRobot. Owen also made a very nice tutorial using this layout technique.
2 Columns, ALA Style — Famously chronicled by Jeffrey Zeldman in his ALA article A Web Designer's Journey, this is an extremely easy layout to implement requiring only a simple float:left declaration.
4 Columns, All Fluid — This technique can actually be used to provide as many columns on a page as you like. Drawback #1) it gets difficult quickly if you want to make any of the columns a fixed width. Drawback #2) it relies heavily on percentages, which the various browsers all calculate differently, so you can't place your columns very precisely. Still, a very useful technique, especially if you don't want borders and different background colors for your columns.
3 Columns, All Fluid — A much simpler and potentially more useful technique that then 4 column technique above. It uses float:left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed.
Static Width and Centered — 3 columns all with static widths, and contained in a parent DIV which remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.
Nested Float — A very simple layout that features a nested, floated menu in the upper right. Easily reversed. A variation of this technique is in use on this very page.
CSS Resources
Specs, primers, validators, stuff like that
The CSShark Answers FAQs — Martina Kosloff has compiled a pretty good FAQ on CSS. Worth your time.
css/edge — From the mind of Eric Meyer comes this great little site pushing CSS to the edge. It is, in his words: "intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations."
websitetips.com CSS section — Literally a ton of links to CSS resources from all over. A better set of links than this one by far.
Guide to Cascading Style Sheets from the Web Design Group. — An excellent primer if you need to start from scratch. It features a tutorial, a reference section, a syntax validator, and more CSS links. A little dated, but still an excellent place to start.
Style Sheet Reference Guide from webreview.com. — Eric Meyer's excellent resource, including the justly famous browser compatibility charts. It's a bit dated (I wish it included Opera 5 and more of CSS2) but still an excellent resource.
CSS School from w3schools.com. — A whole lot of information, references, and examples.
Cascading Style Sheets, level 1 Recommendation from the Web Design Group. — This is the spec (really a rec) folks; can be very helpful if you learn how to read it.
W3C CSS Validation Service — Download a CSS validating app, give it a URL, or cut and paste your CSS here for the ultimate in CSS Validation services.
The Layout Reservoir from BlueRobot. — A resource much like this page with beautiful CSS layouts for you to steal.
Agitprop — Todd Fahrner's collection of CSS writings, tests, and treatises. Good stuff.
CSS Pointers Group — A great resource full of information and links to other resources on CSS. Some of it is a bit dated (but what isn't in today's modern age?), and they are all down on multi column layouts, but still a must visit.
Eric Meyer's CSS work — The author of the O'Reilly CSS Definitive Guide, Eric has done an amazing amount of writing and work on CSS. One highlight: his frame set views of the W3C's CSS references.
CSS Tutorials
Places elsewhere to learn the CSS trade.
Advanced CSS layouts: Step by Step — Rogelio Vizcaino Lizaolo and Andy King attempt to replicate the webreference. com home page using CSS for layout, and they take you along for the trip. Great stuff.
Everything you ever wanted to know about Style — Jump in here if you are new to CSS. And read it again if you are an old hand, because you could stand a good reminder. Very thorough.
From Hacks to Standards: A Web Designer's Journey — Jeffrey Zeldman's report from the CSS front. Describes the battle he waged while trying to update A List Apart site with a CSS layout. There is more good information in that article than is dreamt of in your philosophy. And there is some follow up info here.
Box Lessons — Owen Briggs has expanded his tutorial into a very nice resource that not only provides some very useful layouts, but also details all the aggravating problems he encountered while developing them.
Design-o-rama at glassdog.com — This is where I first learned how to use style sheets, and it remains a very useful tutorial for getting started with CSS.