Breaking Out of the Box With CSS Layouts

Adding the Backgrounds

Let's turn on some backgrounds so we can see the boundaries a little more clearly. Note that, for this example, I'm using the faux-column technique to create the columns. This technique basically takes a background image and repeats it vertically to create the first two column colors (and avoid uneven heights):

The CSS that makes this happen can be found in the #page selector:

#page {  
 margin: 0 auto;  
 width: 960px;  
 background: url(page.gif) repeat-y;  
 text-align: left;  
}

Now that we have the basic structure, we'll add some margins and padding to the columns to create some whitespace.

The width of our page -- 960px -- divides evenly by 12, so we'll use this value as the basis for our margins and padding (and later we'll use it for font size). To provide a little more breathing room, let's double it and use 24px for our margins. Whitespace is important. We'll then subtract 48px from each column to accommodate our new margins. Here's the CSS:

* {  
 margin: 0;  
 padding: 0;  
}  
body {  
 background: #eee;  
 text-align: center;  
}  
#page {  
 margin: 0 auto;  
 width: 960px;  
 background: #fff url(page.gif) repeat-y;  
 text-align: left;  
}  
#header {  
 height: 192px;  
 background: #966;  
}  
#header p {  
 padding: 24px;  
}  
#content-primary {  
 float: right;  
 margin: 24px;  
 width: 720px;  
}  
#content-secondary {  
 float: right;  
 margin: 24px;  
 width: 144px;  
}  
#footer {  
 clear: right;  
 background: #333;  
}    
#footer p {  
 padding: 24px;  
}  
.clear {  
 clear: both;  
}

So far, this is what we have.

As you can see, we essentially have our wireframe in place -- with added colors and content. Now we can move beyond the wireframe and get a little more experimental with the design.

Dropping in Content

Let's go ahead and add some images, a menu, headings, and so on, so that we really have more to work with. This isn't an advanced tutorial, though, so we'll keep things fairly simple. Here's the HTML:

 <div id="page">  
     <div id="header">  
       <p>Header content</p>  
       <ul>  
         <li><a href="#">Link</a></li>  
         <li><a href="#">Link</a></li>  
         <li><a href="#">Link</a></li>  
       </ul>  
     </div>  
     <div id="content-primary">  
       <h1>Welcome to my awesome website.</h1>  
       <h2>Indeed, this is an awesome website.</h2>  
       <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p>  
       <img src="photo.jpg" alt="" />  
       <p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p>  
       <h2>Oooh, more copy&hellip;</h2>  
       <p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p>  
     </div>  
     <div id="content-secondary">  
       <h3>Important Information</h3>  
       <p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p>  
     </div>  
     <div id="footer">  
       <p>Photograph by <a href="http:/jinabolton.com">Jina Bolton</a>.</p>  
     </div>  
   </div>

Here, a menu (or navigation system) has been added. We've also added some headlines and a photograph. Now, I have to admit, the default typographical settings and colors are driving me a little mad, so let's go ahead and add some aesthetic styling to make things look a little nicer. Take a look at this CSS:

* {  
 margin: 0;  
 padding: 0;  
}  
body {  
 background: #eee;  
 font: 12px/18px "Lucida Grande", Verdana, sans-serif;  
 text-align: center;  
 color: #333;  
}  
a:link, a:visited {  
 color: #633;  
}  
a:hover {  
 color: #966;  
}  
h1 {  
 margin-bottom: 11px;  
 padding-top: 15px;  
 padding-bottom: 21px;  
 border-bottom: 1px solid #ccc;  
 font: normal italic 1.5em/18px Georgia, serif;  
 color: #633;  
}  
h2, h3{  
 font-weight: normal;  
 font-size: 1em;  
 line-height: 18px;  
}  
h2 {  
 padding-top: 10px;  
 padding-bottom: 20px;  
 font-size: 1.25em;  
 text-transform: uppercase;  
 color: #999;  
}  
h3 {  
 padding-bottom: 6px;  
 font-weight: bold;  
 text-transform: uppercase;  
 letter-spacing: -1px;  
 color: #633;  
}  
#page {  
 margin: 0 auto;  
 width: 960px;  
 background: #fff url(page.gif) repeat-y;  
 text-align: left;  
}  
#header {  
 height: 192px;  
 background: #966;  
}  
#header p {  
 float: left;  
 padding: 60px 24px 24px 24px;  
 font-size: 1.5em;  
 line-height: 1em;  
 color: #fff;  
}  
#header ul {  
 padding-top: 62px;  
 padding-right: 12px;  
 text-align: right;  
 list-style: none;  
}  
#header li {  
 display: inline;  
 margin: 0 12px;  
}  
#header li a {  
 font-size: 1.25em;  
 line-height: 1em;  
 text-decoration: none;  
 color: #fff;  
}  
#header li a:hover {  
 color: #300;  
}  
#content-primary {  
 float: right;  
 margin: 24px;  
 width: 720px;  
}  
#content-primary p {  
 padding-bottom: 18px;  
}  
#content-primary img {  
 float: left;  
 margin: -6px 18px 0 -6px;  
 padding: 3px;  
 border: 3px solid #eee;  
 background: #fff;  
}  
#content-secondary {  
 float: right;  
 margin: 24px;  
 width: 144px;  
 font-size: 11px;  
 color: #300;  
}  
#content-secondary p {  
 padding-bottom: 18px;  
}  
#footer {  
 clear: right;  
 height: 192px;  
 background: #333;  
 font-size: 10px;  
 line-height: 1em;  
 text-shadow: 1px 1px 1px #333;  
 color: #fff;  
}  
#footer a:link, #footer a:visited {  
 color: #c99;  
}      
#footer p {  
 padding: 24px;  
}  
.clear {  
 clear: both;  
}

Besides setting type styles, we've also adjusted the spacing to give things more breathing room. The footer was set to a height of 192px (not just for consistency -- I like fat footers). I also gave the img negative margins so that the padding and borders would extend outside the boundaries, lining it up more nicely.

Let's take a look at our progress.

Now, if all CSS designs looked like this page, I could understand a designer's concern about CSS layouts being boring. However, as we're about to see, it doesn't take much to make things much more interesting.