An Elastic Design for the CSS Zen Garden

The CSS Zen Garden (http://www.csszengarden.com) by Dave Shea is a web site dedicated to showing how a single HTML file can be presented in many different ways using CSS. Designers submit CSS and images that wrap new skins around a single, unchanging HTML file. The site illustrates the power of CSS to create wildly different designs for the same HTML markup. View all the Zen Garden designs for a visual feast. In this article, I will create a design for the garden and take you through the process step by step.

The biggest challenge of creating a design for the garden is that you can't change the HTML markup to be more friendly to your design. In our case, we're aiming for a clean, minimalistic but ambitious design with a partially open frame in a fluid layout. Most designs at the garden are fixed width, which is significantly easier to achieve. This is especially true when you consider that a valid Zen Garden design must render correctly when the text size of the browser is increased or decreased by two steps. Later in this article, I'll discuss testing a Zen Garden submission.

Here's a look at what the final design will look like. Keep in mind that when we resize the browser window horizontally, the design will expand, contract and move accordingly including the thin grey line underlining the red Zen Garden title: