Introduction

Learning how to use CSS for creating web sites is a pain in the ass. It’s not easy and it will hurt you. Over the last several years I’ve been asked by many web designers and developers about how to best get started with building web sites using CSS and standards. Usually, I’ll just send them 300 links and wish them a lot of luck. This overview is sort of my penance.

HTML Form Builder

When it comes to understanding the world of standards based design, you have to think medieval. Creating a web site in CSS is like building a manor. You are a lord, setting aside land for specific purposes, hoping the user rotates their content appropriately. Most of you will build villages attracting only a few peasants to comment on various decrees, some of you will build castles and a very small number will build what I can only describe as cathedrals—structures that warrant pilgrimages from thousands across the globe.

There are few manuscripts to guide the way and the few monasteries dedicated to the craft are mostly filled with men. In addition to the kings, queens, wizards, dragons, knights, blacksmiths and apprentices, there is the code of conduct and the Crusades and the Inquisition and the trials and the tribulations and the terrible spiritual journey that everyone seems to think is a necessary rite of passage to leave behind the world of tables and spacer gifs. It’s a hard living because it’s not easy. It could be and should be easy, but there are too many exceptions and too many rules you have to know just to get started. Tables, I’m going to remind you, are easy. Slutty almost in their seductively slothy ways. It’s not too late to go back right now.

That said this overview will cover the current strategies used around the web to build the foundation of every CSS-based web site: layouts. Creating a layout in CSS is one of the hardest skills to master both conceptually and in practice because the vocabulary is large, somewhat new (even for experienced web designers) and often contradictory. Before we begin, please remember that these techniques are like footsteps in Heraclitis’s river, they are ever changing and should not be seen as doctrine but as guides. This overview will not hold your hand through every step of the process, but will help you find what I think are the paths to the appropriate sources.

They’re Just a Bunch of Boxes

There is a fierce and complicated history and dialectic to follow when it comes to the evolution of the XHTML and CSS architectures. The W3C has been there nearly every step of the way documenting and creating great tools to help everyone in the community keep track of the chaos and dialogue. Like any field or discipline that’s constantly evolving, I think starting your relationship with the authoritative source and moving outwards is the best approach to mastering it. If you’re serious about learning CSS, I highly recommend reading W3C’s technical specs and white papers.

In regards to creating layouts, I recommend paying particular attention to W3C’s ideas in Chapters 9 and 10 on the Visual Formatting Model. I’m not going to lie to you, it’s a dry read. But it’s also a good foundation / review for professionals and budding amateurs. This chapter describes how user agents (browsers) should process the document tree for visual media. There are two important ideas I took away the first time I read through the material:

1. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. It’s crucial to understand that there are several ways to visualize the structures of an XHTML document. There’s the text itself, which is a linear sort of thing. Then there are the hierarchies contained in the document tree, which is extremely useful for programmers who need to traverse the information for scripting purposes. And for the designers, it’s just a bunch of boxes with borders, internal personal space (padding) and external personal space (margins). Creating a layout with CSS is simply a manipulation of the rules that govern the properties of these boxes and their personal spaces. This is what W3C says they are:

The layout of these boxes is governed by:

  • box dimensions and type.
  • positioning scheme (normal flow, float, and absolute).
  • relationships between elements in the document tree.
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.).

W3C Visual Formatting Model

To illustrate the point further, check out some of my favorite layout depositories:

2. A web page created with CSS is three dimensional. People often forget that there is a z-axis or depth to these pages. Thanks to the z-index property, boxes can be layered on top of one another to create complex visual effects. This idea might be confusing to some, but it makes sense when you think about how the best examples or illustrations of various concepts surrounding certain CSS techniques are best explained with 3 dimensional diagrams. Compare W3C’s diagram of the Box Model with Red Melon’s interactive flash demo of the box model. I believe this ability to layer elements is CSS’s greatest advantage over creating layouts with tables. Understanding the power and versatility of boxes that can be stacked and rearranged at whim was the knowledge that set me free from the old school way of doing things.

In the last few years there’s been a sort of visual renaissance in the CSS design community to break the notion that the web will only be constructed with boxes and squares upon squares. This defiance has lead to the rapid adoption of any visual trickery that can create additional depth and curves to a design: rounded boxes, angled/rotated banners, gradient backgrounds, drop shadows, etc. These visual tricks have all been put on the list of things to come with the CSS3 specs. It is this organic interaction between W3C and users /developers that I find most exciting about this community. Because our environment is always evolving, working with and pushing CSS layouts today helps make things much more exciting and easier to implement in the future.

Fixed vs. Fluid

One of the great debates you’ll find in the CSS design community is over whether fixed or fluid layout solutions best compensate for the differences between the 800x600 crowd of the corporate/typical user and the forward-thinking, obsessive-compulsive, ridiculous resolution users that tend to be the designers themselves. The problem, as I see it, is that the web is a dynamic medium that can be accessed in a variety of visual and operating formats. The basic fluid-pusher philosophy is that web designs should reflect their medium and be dynamic and adaptable. Unfortunately, for a field that is usually comprised of converted print and traditional graphic designers, this loss of control over the final presentation and dimensions proves difficult and sometimes even impossible.

To read more about the debate, check out the articles for and against both sides pointed out by Water vs. Stone - The reality of Fluid layouts.

The Other Options

The arguments for fixed and fluid layouts are primarily concerned with determining the ultimate width of a web site. This is because widths usually determined the number of useful columns that can be used to design a site, which is a major layout consideration among a lot of “traditional” graphic designers. Thanks, however, to a lot of experimentation by a lot of exciting people, the choices are no longer simply restrain your layout to some arbitrary 700 pixel limit or go 100% and risk poor text readability at larger resolutions.

  • Elastic Design - this concept proposes the use of ems instead of percentages to describe widths and typography. This would then tie a layout to the user’s preferred reading size. The logic being that a layout isn’t any good to someone who can’t see the content.

  • Elastic Layouts - show how minimum widths can be used to prevent a layout from collapsing. Even goes over a little known hack you can use to make it work for IE.

  • Stu Nicholls’s Percentage PLUS pixel widths is an ingenious method that presents a more organic resizing of widths by allowing you to specify a percentage plus a fixed width for an element DEMO

  • Resolution Dependent Layout - using JavaScript you can detect a browser’s viewport size and adjust a layout’s behavior to compensate accordingly. DEMO A variation of this is used on Microsoft’s homepage and we use it here on Particletree to adjust the width of our articles for larger resolutions and determine the number of features that are shown on the front page so that the notebook section is always hinted to the user.

Browser Bugs

In the beginning, when everything was new and the potential of the web was high, people were pushing the boundaries, but were frustrated that some of their solutions or implementations were just not working. It turned out the problem, the very thing that makes designing for the web so difficult, was in the renderings by the “user agents” or browsers. And while it’s nice to know that some problems are just not your fault, rendering differences across browsers make the task of designing for the web counter-intuitive and extremely frustrating. If you’re serious about web design, keep tabs on the following two sites—they have distilled the art and accident of finding browser bugs to a science:

CSS Filters and Hacks

The obvious question you ask once you realize that you’ve run into one of these browser problems is what you can do about it. Well, one way to go about it is to not allow certain CSS rules to get through to certain problem browsers. These techniques are called filters and can be found here:

CSS Filters for Bypassing Specific Browsers

Or you can use a hack to trick the browser into doing what you want it to do … they’re easy to find and somewhat easy to use BUT I must warn you—they are ugly solutions, solutions that have no future. Two wrongs really don’t make a right in the long run and I want to recommend reading the following articles first to see what preventative strategies and alternatives are out there to avoid using these evils.

Articles on Hack Education and Hack Alternatives

Kevin’s Cliff Notes Version : Avoid them, Understand them if you have to use them, Comment your Hacks, Import your Hacks.

Layout Generators

And then when you get desperate, you can always ask the robots to do it for you. Here are some web sites created in typical Web 2.0 fashion to do your bidding online. Not only are they great for the lazy, they’re good starting points for those who like to look and take apart without feeling guilty.

HTML Form Builder
Kevin Hale

An Overview of Current CSS Layout Techniques by Kevin Hale

This entry was posted 5 years ago and was filed under Features.
Comments are currently closed.

· 26 Comments! ·

  1. Leszek Swirski · 5 years ago

    The links need fixing - but good article.

  2. Kevin Hale · 5 years ago

    Mmm … smart quotes got me. Hopefully, they should all be good now. Thanks Leszek.

  3. Julius · 5 years ago

    Sorry for being one of those people (that bug you about where to start with CSS). If anything, at least you’ve saved yourself some copy/paste time now that you can just send us here.

    Also, death to the “water vs. stone” issue for being a major pain in the butt. Damn you print designers for not having to worry about that. Especially these days when people are starting to use widescreen resolution screens as well as vertically rotated monitors. Then again, worrying about column widths isn’t so bad when you still have to deal with NTSC/HDTV and safe zones.

  4. Danny Halarewich · 5 years ago

    Awesome article. Even as a seasoned amateur CSS’er myself I still found your links interesting. I remember those layout resevoirs when I first started, but I long lost the links. Looking at them again has given me new ideas as I got stuck in the fixed width/centered layouts as of recently.

    Good stuff.

  5. Matthew Pennell · 5 years ago

    Excellent article, Kevin - funny how even after what seems like years, those old Glish and Blue Robot links are still the go-to resources for CSS layouts.

  6. Kevin Hale · 5 years ago

    Juls! - Great to hear from you man! I totally agree about broadcasting’s headaches with multiple formats.

    Matthew - I agree. I love the simplicity of usefulness or their implementations. They’re just good templates.

  7. Yannick L. · 5 years ago

    Good stuff guys. Very nice article and the links were very helpful.

  8. Douglas Clifton · 5 years ago

    Very nicely written article. I have most, if not all, of the resources listed here in my developers index section on CSS. Yet you do such a good job of pulling them all together and explaining how each resource relates to a separate issue when designing with stylesheets, I may be forced to link to this tutorial in the introduction at the top of the category.

    Oh hell, I went ahead and did it before I even submitted this comment.

    Nice work as usual Kevin, Particletree rocks.

  9. z · 5 years ago

    Everyone needs a hug.

  10. Michael Geary · 5 years ago

    Where is the interactive flesh demo? I clicked on the ink but didn’t see any interactive flesh.

  11. Kevin Hale · 5 years ago

    Man, our copy editor sucks. Oh wait.

  12. AaronA · 5 years ago

    Thanks for the great article =) Something just finally clicked for me with CSS - I think I understand how it works. This is going to be fun =D (of course, now I need to find time to redo my site).

  13. Michael Geary · 5 years ago

    Copyediting aside :-) I really appreciated the interesting article. Thanks!

  14. Masklinn · 5 years ago

    Great article, witty and funny, I love it.

    I’d like to know though, Kevin, would you allow me to try to translate it to french? I know quite a lot of people who could use such an article, but don’t read english quite well enough to get the original version…

  15. Kevin Hale · 5 years ago

    That would be awesome Masklinn. Definitely, let us know when it’s done so we can link to it on the site.

  16. Heiko · 5 years ago

    Nice Overview about the Layout Techniques Kevin. 9 years ago I created sites with tables and it constricted me. I required articles like this ;O) By the way nice articles from you in the Treehouse Magazine.

  17. Marko Petkovic · 5 years ago

    Yeah this is quite good article to have bookmarked. Bookmarked now!

  18. Daniel MD · 5 years ago

    This article is very cool… got me up to speed, the last itme i used HTML was with v3.2, how things have changed all these div and span tags make me very happy… and separation of content and style is like a dream come true for an old timer like me.

    By the way how do you do the check on visited links, and can you hide the links?! after they are visited… without Cookies?

  19. Riverini · 4 years ago

    Everyone needs a hug. specially me who is a newbie in this post CSS world of ours…

    Great Article!

  20. Dan A · 4 years ago

    Just what I’ve been looking for as someone who’s been doing amateur web design for a good few years - trying to move into XHTML/CSS for the past 1 or 2 of them and have struggled with everything from weird background colours in IE to getting 100+ errors on the validator.

    Great article and one that I’ll be returning to.

  21. Chris · 4 years ago

    Well, I just stick with tables :-) No problems at all and users and customers don’t care! Why not keeping it simple - table are simple and therefore easier to maintain …

    just my two cents …

  22. Illustraties · 4 years ago

    I really loved this article. It might need some more illustraties though. Tekeningen.

  23. Dekoration · 4 years ago

    Man, our copy editor sucks. Oh wait.

  24. Green · 4 years ago

    Hi Sam! Photos i send on e-mail. Green

  25. Andreas · 3 years ago

    this articel is very cool and funny