The Zen of CSS Design

Dave Shea, Molly E. Holzschlag

Mentioned 6

Provides information on creating imaginative Web site designs using CSS.

More on Amazon.com

Mentioned in questions and answers.

I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
For instance:

  • I still do layout with tables and not with just CSS. I haven’t still found out a way to correctly present data aligned and tabular.
  • I don’t know the difference between display: none and visibility: hidden (well, I know it now. but there are many cases like- padding, margins, overflows etc)
  • I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a # and not a class.
  • Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
  • I don’t know what this picture in firebug is conveying (by the way, firebug is my savior. Life would have been impossible without Firebug)

alt text

  • Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.

I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.

I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.

Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.

You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.

And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.

Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.

Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.

Some thoughts on what you posted.

  • A Master Reset style sheet will help with browser differences.

  • And Tabular data should use tables.
    It's layouts that should avoid table tags in favor of css.

for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.

Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.

The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.

Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.

I am CSS-disabled. I've been trying to use it for almost a decade, and still can't figure out how floats work properly [floats is just an example].

Is there a site that walks through various real-world layout patterns?

Read The Zen of CSS Design.

Its a book on design in general, but reading it will show you how to get into the correct "mindset" for using CSS in design (including floats, absolute, relative, etc).

Not javascript related,but only with pure css.

I really need a book to teach me how to beautify the web UI badly!

I own The Zen of CSS Design, a great book:

I'm a self-taught web designer and one of the biggest things I have found difficult to grasp is the concept of floats and positioning and I'm afraid it's coming back to bite me in the ass as I'm trying to integrate drop-down menus into my existing navigation.

Further reason to believe my code is horrible is two-fold:

  1. The navigation does not render consistently for cross-browser and cross-platform support. They are minor inconsistencies, at least visually, that I suspect is representative of major flaws in my code.

  2. My page layout breaks in IE 7, most likely due to floats, positioning, as well as a lack of adherence to the box model and IE's width discrepancies.

I've tried to integrate a modified version of the Twenty Ten wordpress theme drop-down menu, but couldn't as it broke the layout.

I hope this doesn't come off as begging for someone to do the work for me. I genuinely want to understand this, but I unfortunately do not have the knowledge necessary to troubleshoot.

Any guidance or help will be greatly appreciated.

Here's the site.

Actually, that's not too bad. I've seen stuff that was much worse.

As for learning positioning and proper CSS design, I highly recommend The Zen of CSS Design. It is a valuable resource in learning how to do CSS correctly.

As for browser compatabilities, here's my scoop on the matter:

First off, if you want to be a professional web designer, it must work on every browser. Period. If it doesn't work on every major browser, then it isn't worth paying for.

In order to get it to work on every browser, I recommend the following:

  1. Start by designing all of your pages on a standards-compliant browser (FF, Chrome, Safari, etc.). Do not design on Internet Explorer.
  2. Work incrementally. Make a small number of changes, test it on all browsers, and catch problems early.
  3. When you spot a problem, search online for why things look different. If you can't find out why things look different, feel free to ask why on SO or other sites like this.

It is a long journey, but you are further down the path than you think.

Lots of div and classes name are being used in the code. http://www.csszengarden.com/

Is there any scope of improvement in semantic?

http://cssglobe.com/post/6957/class-names-revisited

this is mentioned in source code as a comment

This XHTML document is marked up to provide the designer with the maximum possible flexibility. There are more classes and extraneous tags than needed, and in a real world situation, it's more likely that it would be much leaner. However, I think we can all agree that even given that, we're still better off than if this had been built with tables.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Dave Shea" />
    <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display" />
    <meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." />
    <meta name="robots" content="all" />
    <title>css Zen Garden: The Beauty in CSS Design</title>
    <!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
    <script type="text/javascript"></script>
    <style type="text/css" title="currentStyle" media="screen">
        @import "/001/001.css";
    </style>
    <link rel="Shortcut Icon" type="image/x-icon" href="http://www.csszengarden.com/favicon.ico" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml" />
</head>
<body id="css-zen-garden">
    <div id="container">
        <div id="intro">
            <div id="pageHeader">
                <h1>
                    <span>css Zen Garden</span></h1>
                <h2>
                    <span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
            </div>
            <div id="quickSummary">
                <p class="p1">
                    <span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">
                        CSS</acronym>-based design. Select any style sheet from the list to load it into
                        this page.</span></p>
                <p class="p2">
                    <span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">
                        html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">
                            css file</a></span></p>
            </div>
            <div id="preamble">
                <h3>
                    <span>The Road to Enlightenment</span></h3>
                <p class="p1">
                    <span>Littering a dark and dreary road lay the past relics of browser-specific tags,
                        incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym
                            title="Cascading Style Sheets">CSS</acronym> support.</span></p>
                <p class="p2">
                    <span>Today, we must clear the mind of past practices. Web enlightenment has been achieved
                        thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">
                            W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the
                        major browser creators.</span></p>
                <p class="p3">
                    <span>The css Zen Garden invites you to relax and meditate on the important lessons
                        of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored
                        techniques in new and invigorating fashion. Become one with the web.</span></p>
            </div>
        </div>
        <div id="supportingText">
            <div id="explanation">
                <h3>
                    <span>So What is This About?</span></h3>
                <p class="p1">
                    <span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym>
                        to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire,
                        and encourage participation. To begin, view some of the existing designs in the
                        list. Clicking on any one will load the style sheet into this very page. The code
                        remains the same, the only thing that has changed is the external .css file. Yes,
                        really.</span></p>
                <p class="p2">
                    <span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total
                        control over the style of a hypertext document. The only way this can be illustrated
                        in a way that gets people excited is by demonstrating what it can truly be, once
                        the reins are placed in the hands of those able to create beauty from structure.
                        To date, most examples of neat tricks and hacks have been demonstrated by structurists
                        and coders. Designers have yet to make their mark. This needs to change.</span></p>
            </div>
            <div id="participation">
                <h3>
                    <span>Participation</span></h3>
                <p class="p1">
                    <span>Graphic artists only please. You are modifying this page, so strong <acronym
                        title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example
                        files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym>
                        novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/"
                            title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym>
                            Resource Guide</a> for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">
                                CSS</acronym>.</span></p>
                <p class="p2">
                    <span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">
                        HTML</acronym>. This may seem daunting at first if you&#8217;ve never worked this
                        way before, but follow the listed links to learn more, and use the sample files
                        as a guide.</span></p>
                <p class="p3">
                    <span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">
                        html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">
                            css file</a> to work on a copy locally. Once you have completed your masterpiece
                        (and please, don&#8217;t submit half-finished work) upload your .css file to a web
                        server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">
                            Send us a link</a> to the file and if we choose to use it, we will spider the
                        associated images. Final submissions will be placed on our server.</span></p>
            </div>
            <div id="benefits">
                <h3>
                    <span>Benefits</span></h3>
                <p class="p1">
                    <span>Why participate? For recognition, inspiration, and a resource we can all refer
                        to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based
                        design. This is sorely needed, even today. More and more major sites are taking
                        the leap, but not enough have. One day this gallery will be a historical curiosity;
                        that day is not today.</span></p>
            </div>
            <div id="requirements">
                <h3>
                    <span>Requirements</span></h3>
                <p class="p1">
                    <span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">
                        CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym>
                        should be limited to widely-supported elements only. The css Zen Garden is about
                        functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and
                        not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only
                        real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym>
                        validates.</span></p>
                <p class="p2">
                    <span>Unfortunately, designing this way highlights the flaws in the various implementations
                        of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display
                        differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym>
                        at times, and this becomes maddening when a fix for one leads to breakage in another.
                        View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">
                            Resources</a> page for information on some of the fixes available. Full browser
                        compliance is still sometimes a pipe dream, and we do not expect you to come up
                        with pixel-perfect code across every platform. But do test in as many as you can.
                        If your design doesn&#8217;t work in at least IE5+/Win and Mozilla (run by over
                        90% of the population), chances are we won&#8217;t accept it.</span></p>
                <p class="p3">
                    <span>We ask that you submit original artwork. Please respect copyright laws. Please
                        keep objectionable material to a minimum; tasteful nudity is acceptable, outright
                        pornography will be rejected.</span></p>
                <p class="p4">
                    <span>This is a learning exercise as well as a demonstration. You retain full copyright
                        on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">
                            submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">
                                CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/"
                                    title="View the Zen Garden's license information.">one on this site</a>
                        so that others may learn from your work.</span></p>
                <p class="p5">
                    <span>Bandwidth graciously donated by <a href="http://www.mediatemple.net/">mediatemple</a>.
                        Now available: <a href="https://amazon.com/dp/0321303474/?tag=devbookscom20-20">
                            Zen Garden, the book</a>.</span>&nbsp;</p>
            </div>
            <div id="footer">
                <a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s XHTML">
                    xhtml</a> &nbsp; <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS">
                        css</a> &nbsp; <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">
                            cc</a> &nbsp; <a href="http://mezzoblue.com/zengarden/faq/#s508" title="Read about the accessibility of this site">
                                508</a> &nbsp; <a href="http://www.mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site">
                                    aaa</a>
            </div>
        </div>
        <div id="linkList">
            <div id="linkList2">
                <div id="lselect">
                    <h3 class="select">
                        <span>Select a Design:</span></h3>
                    <ul>
                        <li><a href="?cssfile=/213/213.css&amp;page=0" title="AccessKey: a" accesskey="a">Under
                            the Sea!</a> by <a href="http://www.ericstoltz.com/" class="c">Eric Stoltz</a></li>
                        <li><a href="?cssfile=/212/212.css&amp;page=0" title="AccessKey: b" accesskey="b">Make
                            &#8217;em Proud</a> by <a href="http://skybased.com/" class="c">Michael McAghon and
                                Scotty Reifsnyder</a></li>
                        <li><a href="?cssfile=/211/211.css&amp;page=0" title="AccessKey: c" accesskey="c">Orchid
                            Beauty</a> by <a href="http://www.kevinaddison.com/" class="c">Kevin Addison</a></li>
                        <li><a href="?cssfile=/210/210.css&amp;page=0" title="AccessKey: d" accesskey="d">Oceanscape</a>
                            by <a href="http://www.pixel-house.com.au/" class="c">Justin Gray</a></li>
                        <li><a href="?cssfile=/209/209.css&amp;page=0" title="AccessKey: e" accesskey="e">CSS
                            Co., Ltd.</a> by <a href="http://www.benklemm.de/" class="c">Benjamin Klemm</a></li>
                        <li><a href="?cssfile=/208/208.css&amp;page=0" title="AccessKey: f" accesskey="f">Sakura</a>
                            by <a href="http://www.re-bloom.com/" class="c">Tatsuya Uchida</a></li>
                        <li><a href="?cssfile=/207/207.css&amp;page=0" title="AccessKey: g" accesskey="g">Kyoto
                            Forest</a> by <a href="http://rpmdesignfactory.com/" class="c">John Politowski</a></li>
                        <li><a href="?cssfile=/206/206.css&amp;page=0" title="AccessKey: h" accesskey="h">A
                            Walk in the Garden</a> by <a href="http://users.skynet.be/bk316398/temp.html" class="c">
                                Simon Van Hauwermeiren</a></li>
                    </ul>
                </div>
                <div id="larchives">
                    <h3 class="archives">
                        <span>Archives:</span></h3>
                    <ul>
                        <li><a href="/?cssfile=/001/001.css&amp;page=1" title="View next set of designs. AccessKey: n"
                            accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a></li>
                        <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w"
                            accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
                    </ul>
                </div>
                <div id="lresources">
                    <h3 class="resources">
                        <span>Resources:</span></h3>
                    <ul>
                        <li><a href="/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v"
                            accesskey="v"><span class="accesskey">V</span>iew This Design&#8217;s <acronym title="Cascading Style Sheets">
                                CSS</acronym></a></li>
                        <li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r"
                            accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">
                                R</span>esources</a></li>
                        <li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q"
                            accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a></li>
                        <li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s"
                            accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
                        <li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t"
                            accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
    <div id="extraDiv1">
        <span></span>
    </div>
    <div id="extraDiv2">
        <span></span>
    </div>
    <div id="extraDiv3">
        <span></span>
    </div>
    <div id="extraDiv4">
        <span></span>
    </div>
    <div id="extraDiv5">
        <span></span>
    </div>
    <div id="extraDiv6">
        <span></span>
    </div>
</body>
</html>

The big comment kinda answers your question. The CSS Zen Garden is built as a novelty with tons of no-semantic-value tags and attributes to allow for infinite stylings. It's not meant as a model of how a real webpage should organize itself.

Using this sort of HTML in parts of your document where it's necessary is fine, since you're in charge of the CSS. Don't use this kind of markup where you don't need it, but it's perfectly acceptable in small amounts. The Zen Garden just puts it everywhere, just in case.

I am a newbie to the stackoverflow sorry if my english is not good

I have problem with the css code i created a layout it looks like http://postimg.org/image/pg1oay3wl/

my problem is that how to get the vertical space between the divs using CSS i tried giving margin-bottom and padding but it doesnt work for me it works when i give position as relative but the div at the right top moves down when i scroll down i should give a elastic layout.. Please help me in this issue..

here is my code

CSS

@charset "utf-8";
/* CSS Document */


/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


#css-zen-garden {
    width: 80%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    margin: 0 auto;
    min-width: 200px;
    background: #EEE;   
}

h1,h2,h3,h4,h5,h6 {
    line-height: 1.1em;
    margin-bottom: 0.25em;  
}

h1 { font-size: 360%; }
h2 { font-size: 240%; }
h3 { font-size: 210%; }
h4 { font-size: 180%; }
h5 { font-size: 160%; }
h6 { font-size: 140%; }

p {
    font-size: 120%;
    line-height: 1.5em;
    margin-bottom: 0.6em;
}


header {
    border: 5px solid #928452;
    border-style: ridge;
    border-radius: 5px 150px 5px;
    display: block;
    width: 12%;
    height: 300px;
    max-width: 100%;
    padding: 10px;
    min-width: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    text-align: center;
    background: rgba(51,51,51,0.8);

}

header h1 {
    color: #928452;
    padding : 25px;
    display: block;
    vertical-align: middle; 
}

header h2 {
    color: #FFF;
    display: block;
    vertical-align: middle; 
}

.preamble, .explanation, .participation, .benefits {
    width: 21%;
    background: rgba(158,141,77,0.8);
    border-radius: 10px;
    display: block;
    position: absolute;
    clear: both;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 30px;
    animation: zoom 2s;
    animation-direction:alternate;
}

.preamble {
    top: 15%;
    left: 15%;  
}

.explanation {
    top: 50%;   
    left: 8%;
}

.participation {
    top: 10%;
    right: 15%;

}

.benefits {
    top: 55%;
    right: 8%;  
}
.requirements {
    width: 40%;
    background: rgba(158,141,77,0.8);
    border-radius: 10px;
    padding: 10px;
    float: left;
    max-width: 100%;
    min-width: 200px;
    position: absolute;
    left: 35%;
    top: 80%;
    animation: zoom 2s;
    animation-direction:alternate;
}




@keyframes zoom{
        0% {
                opacity: 0;
                transform: scale(.3);
        }

        50% {
                opacity: 1;
                transform: scale(1.05);
        }

        70% {
                transform: scale(.9);
        }

        100% {
                transform: scale(1);
        }

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Zen Garden: The Beauty of CSS Design</title>

    <link rel="stylesheet" media="screen" href="/214/214.css?v=8may2013">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
    <link rel="stylesheet" type="text/css" href="css/default.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Dave Shea">
    <meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
    <meta name="robots" content="all">


</head>


<body id="css-zen-garden">
<div class="page-wrapper">

    <section class="intro" id="zen-intro">
        <header role="banner">
            <h1>CSS Zen Garden</h1>
            <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
        </header>

        <div class="preamble" id="zen-preamble" role="article">
            <h3>The Road to Enlightenment</h3>
            <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
            <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
            <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
        </div>
    </section>

    <div class="main supporting" id="zen-supporting" role="main">
        <div class="explanation" id="zen-explanation" role="article">
            <h3>So What is This About?</h3>
            <p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.</p>
            <p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
        </div>

        <div class="participation" id="zen-participation" role="article">
            <h3>Participation</h3>
            <p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
            <p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you&#8217;ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
            <p>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">HTML</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">CSS</a> to work on a copy locally. Once you have completed your masterpiece (and please, don&#8217;t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
        </div>

        <div class="benefits" id="zen-benefits" role="article">
            <h3>Benefits</h3>
            <p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
        </div>

        <div class="requirements" id="zen-requirements" role="article">
            <h3>Requirements</h3>
            <p>Where possible, we would like to see mostly <abbr title="Cascading Style Sheets, levels 1 and 2">CSS 1 &amp; 2</abbr> usage. <abbr title="Cascading Style Sheets, levels 3 and 4">CSS 3 &amp; 4</abbr> should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.</p>
            <p>Luckily, designing this way shows how well various browsers have implemented <abbr title="Cascading Style Sheets">CSS</abbr> by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days &#8212; especially when you factor in mobile &#8212; pixel-perfect layouts may not be possible across every platform. That&#8217;s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
            <p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We&#8217;re well past the point of needing another garden-related design.</p>
            <p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</p>
            <p role="contentinfo">By <a href="http://www.mezzoblue.com/">Dave Shea</a>. Bandwidth graciously donated by <a href="http://www.mediatemple.net/">mediatemple</a>. Now available: <a href="https://amazon.com/dp/0321303474/?tag=devbookscom20-20">Zen Garden, the book</a>.</p>
        </div>


</body>
</html>

I'm just learning/practicing, so any help would be SUPER appreciated. Also, if you find other errors or inefficiencies while looking, I'd love to hear about it.

I have four layers.

.body .main .main-side .sidebar

This is essentially what I'm trying to recreate , and everything is working fine other than the third layer, or in the case of the example, the navy blue bar extending vertical on the right side. I can get it to go to the second layer (right above the main background) or cover up everything (including the sidebar), but I can't get it between layer two and four (in the example, the light blue inner box and the smaller, yellow side box.) Thanks in advance!

Here is the HTML and the CSS.

<!doctype html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="./style.css"/>
    <title>CSS Zen Garden</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="main-side"></div>
<div class="main">
    <h1 class="redbox">CSS Zen Garden</h1>

    <h2>The Beauty of CSS Design</h2>
    <div class="sub-heading">
        <p class="top>">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>

        <hr>

        <p class="bottom">Download the example <a href="#">HTML file</a> and <a href="#">CSS file</a>
    </div>
<div class="enlightenment">         
    <h3>The Road to Enlightenment</h3>

        <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers</p>

        <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>

        <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>

<div class="about">
    <h3>So What is This About?</h3>

        <p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>

        <p>CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>

<div class="participation">
    <h3>Participation</h3>

        <p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.</p>

        <p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>

        <p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>

<div class="benefits">
    <h3>Benefits</h3>

        <p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>

<div class="sidebar">
    <h3>Select a Design:</h3>

        <ul>
            <li>
                <a href="/221/" class="design-name">Mid Century Modern</a> by                       <a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
            </li>

            <li>
                <a href="/220/" class="design-name">Garments</a> by                     <a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
            </li>                   

            <li>
                <a href="/219/" class="design-name">Steel</a> by                        <a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
            </li>                   

            <li>
                <a href="/218/" class="design-name">Apothecary</a> by                       <a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
            </li>                   

            <li>
                <a href="/217/" class="design-name">Screen Filler</a> by                        <a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
            </li>                   

            <li>
                <a href="/216/" class="design-name">Fountain Kiss</a> by                        <a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
            </li>                   

            <li>
                <a href="/215/" class="design-name">A Robot Named Jimmy</a> by                      <a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
            </li>                   

            <li>
                <a href="/214/" class="design-name">Verde Moderna</a> by                        <a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
            </li>                   
        </ul>

    <h3>Archives:</h3>
        <ul>
            <li>
                <a href="/217/page1">                   Next Designs <span class="indicator">&rsaquo;</span></a>
                </li>

            <li>
            <a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden.">View All Designs</a>
            </li>
        </ul>

    <h3>Resources:</h3>
        <ul>
            <li>
                <a href="/217/217.css" title="View the source CSS file of the currently-viewed design.">View This Design&#8217;s CSS</a>
            </li>

            <li>
                <a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS.">CSS Resources</a>
            </li>

            <li>
                <a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden.">FAQ</a>
            </li>

            <li>
                <a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
                Submit a Design</a>
            </li>

            <li>
                <a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page.">Translations</a>
            </li>
        </ul>
</div>

<div class="requirements">
    <h3>Requirements</h3>

        <p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>

        <p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>

        <p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>

        <p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>

        <hr>
    <div class="author">
        <p>By <a href="http://www.mezzoblue.com/">Dave Shea</a>. Bandwidth graciously donated by <a href="http://www.mediatemple.net/">mediatemple</a>. Now available: <a href="https://amazon.com/dp/0321303474/?tag=devbookscom20-20">Zen Garden, the book</a>.</p>
    </author>
</div>

        <footer>
            <a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s HTML" class="zen-validate-html">HTML</a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS" class="zen-validate-css">CSS</a>
            <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a>
            <a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class="zen-accessibility">A11y</a>
            <a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen-github">GH</a>
        </footer>
</div>
</body>
</html>


body    {
    font-family: 'Source Sans Pro';
    line-height: 120%;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    background: #daede2;
    z-index: 1;
    width: 90%;
    vertical-align: center;
}

p   {
    font-size: 20px;
    line-height: 140%;
    padding-left: 50px;
}

h1  {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 30px;
    color: white;
    margin-bottom: -25px;
}

h2  {
    font-weight: 900;
    font-size: 130px;
    line-height: 100%;
    color: white;
    letter-spacing: -.025em;
    line-height: 1em;
    width: 65%;
    margin-left: 50px;
    position: relative;
}

.sub-heading    {
    text-transform: uppercase;
    width: 60%;
    margin: 0 0 50px 14px;
    position: relative;
    color: white;
    letter-spacing: .07em;
    font-size: 18px;
}

h3  {
    font-size: 30px;
    font-weight: 400;
    padding-left: 50px;
}

.main   {
    background: #77c4d3;
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 2;
    height: 5000px;
}

.main-side  {
    background: #3a4453;
    position: absolute;
    left: 1020px;
    height: 2000px;
    top: -200px;
    width: 30%;
    z-index: 1;
}

.redbox {
    background: #df3c56;
    position: relative;
    top: 50px;
    left: 50px;
    padding: 25px;
    width: 224px;
    text-align: center;
}

.enlightenment  {
    background: #f2f9fb;
    padding: 50px 50px 50px 0;
    width: 58%;
    position: relative;
    top: 40px;
    margin-bottom: 150px;
}

.about  {
    color: white;
    width: 45%;
    margin-bottom: 100px;
    margin-top: 250px;
}

.about h3 {
    color: white;
}

.benefits   {
    background: #f2f9fb;
    position: relative;
    top: 225px;
    float: left;
    padding: 50px;
    width: 25%;
    left: 50px;
}

.sidebar    {
    background: #e9f198;
    position: absolute;
    top: 70px;
    right: 0px;
    width: 25%;
    font-size: 18px;
    line-height: 200%;
    letter-spacing: -.01em;
    padding-right: 40px;
    z-index: 4;
}

.sidebar a, h3  {
    color: #333;
}

.sidebar h3 {
    font-weight: 400;
    padding-left: 40px;
    margin-bottom: -20px;
}

.sidebar ul {
    list-style-type: none;
}

.participation  {
    background: #df3c56;
    float: right;
    width: 45%;
    color: white;
    position: relative;
    top: -618px;
    right: 80px;
    padding-top: 50px;
}

.participation p {
    padding: 0 50px 0 50px;
}

.participation h3 {
    color: white;
}

.requirements   {
    background: #f2f9fb;
    position: relative;
    float: right;
    top: -625px;
    width: 57%;
    padding: 50px;
}

.requirements a {
    color: #333;
    text-transform: uppercase;
}

.author {
    text-transform: uppercase;
}

footer  {
    background: #e9f198;
    position: relative;
    top: 119px;
    padding: 25px;
    font-size: 22px;
    word-spacing: 10px;
    color: #333;
    left: -440px;
    width: 80%;
}

a   {
    text-decoration: none;
    color: white;
    border-bottom: solid 1px #999;
    padding-bottom: 2px;
}

hr  {
    border: 0;
    height: 0;
    border-top: 1px solid #df3c56;
    width: 93%;
    margin: 50px 0 50px 50px;
}

All you need to do is move .main-side into .main so you can add the right z-index to it to make it overlap like the example you posted and adjust the values:

.main-side  {
  background: rgba(58,68,83, .8); //convert to rgba so you can fade the background like the example
  position: absolute;
  right: -150px; //update - change to right instead
  height: 2400px; //update
  top: -200px;
  width: 30%;
  z-index: 1;
}

I also converted some of your colors to rgba to give it that transparent look.

FIDDLE

I would like to learn moders XHTML and CSS programming. Does someone has any good book suggestions where to start? I would like to have a book where I can learn those languages completely or as much as possible and I can use them if I get trouble on my web-programming projects. And of course I would like that my sites passes web-standards and validators and teaches what are different DTD's.

I would second the recommendation of Head First HTML with CSS & xHTML.

Other good "starter" books would be:

All of the above are very readable and focused on the practical.

Css Mastery - is the best CSS book I have read. If you think you know a lot about CSS, this book will open eyes!

I learned from the CSS Zen Garden and the associated book, The Zen of CSS Design. I'm not sure that's the best way since the books are more about the design aspects of css, but it worked for me.