Breaking Out of the Box With CSS Layouts

Fracturing the Grid

My design teacher was affectionately called the "Grid Nazi." He would measure everything and make sure all the pieces of a design matched and were lined up. However, though The Grid was very important to him, he stressed that knowing how to fracture the grid in the right way could really bring energy to a design.

So how do you fracture the grid the right way? Well, it's important to keep in mind the fact that proportion is a beautiful thing. I like to break columns up a little by offsetting objects outside of a margin. For this example, we can use the offset image, and also apply a left-side margin to the primary content (to get some more of that whitespace we love). Take a look at this wireframe, in which the image extends beyond the boundaries of the area created by our wireframe:

This feature is easy to accomplish using a negative margin in CSS:

#content-primary {  
 float: right;  
 margin: 12px 24px 60px 24px;  
 width: 528px;  
}  
#content-primary img {  
 float: left;  
 margin: -6px 18px 0 -114px;  
 padding: 3px;  
 border: 3px solid #eee;  
 background: #fff;  
}  
#content-secondary {  
 float: right;  
 margin: 30px 216px 60px 24px;  
 width: 144px;  
 font-size: 11px;  
 color: #300;  
}

First, I applied a few rules that exist for aesthetic purposes only -- you can decide to skip this part if you like. I decided I wanted the baselines of both the columns to line up properly. To achieve this, I adjusted the top margins of #content-primary and #content-secondary until the baselines lined up as intended. Then I set a larger margin (of 60px) on the bottoms of these both columns -- I prefer the bottom spacing on the designs I create to be a little larger than expected.

Next, I reduced the width of #content-primary, as is shown in the wireframe image. Now we can give the image a negative margin of 114px, which will allow the image to extend halfway into the margin.

Since we made the #content-primary smaller, we'll need to give #content-secondary a larger right margin so that it will sit to the left as intended. I also wanted to extend the border of the h1 out into the margin, just to balance things out a little. You can do this using negative margins, too:

h1 {  
 margin-bottom: 11px;  
 margin-left: -108px;  
 padding: 15px 0 21px 108px;  
 border-bottom: 1px solid #ccc;  
 font: normal italic 1.5em/18px Georgia, serif;  
 color: #633;  
}

The left-side padding was set to equal the negative margin, so the text will stay in place, but the border extends out as intended.

Another nice technique you can use to break up the "boxy" look is to apply an ornamental background image that can also extend into the margin. We create this look using roughly the same approach we used above:

h2 {  
 margin-left: -204px;  
 padding: 10px 0 20px 204px;  
 background: url(h2_ornament.gif) 3px 0 no-repeat;  
 font-size: 1.25em;  
 text-transform: uppercase;  
 color: #999;  
}

Little changes like this can be simple and subtle, yet they have the potential to really make a difference and break up straight lines.

While "fracturing the grid" definitely helps, this layout still could use something more.

Applying Abstraction

Antoni Gaudi believed that the straight line belonged to man, and the curved line belonged to God. If you want to see abstract, take a look at his work.

In this project, we're not exactly going all-out abstract, but it's fun to have the work of the masters in the back of your mind when you're using abstraction. Whether it's used along with a grid, or used on its own (in the vein of Gaudi), abstraction can add that little "something" that's needed to make a design really interesting.

For our layout, the #header and #footer are quite simple, so let's add some snazzy background images to these sections. Whether it's everyone's favorite rounded corner, a diagonal line, or a swirl, the background image is up to you ... be creative with it.

Let's start with the footer. (There's no particular reason the footer should be first -- I just felt like choosing it.) Let's add a background image that will "decorate" the top of the footer:

The rest of the footer will be filled with the dark gray color. Here's the relevant CSS:

#footer {  
 clear: right;  
 height: 192px;  
 background: #333 url(footer.gif) top no-repeat;  
 font-size: 10px;  
 line-height: 1em;  
 text-shadow: 1px 1px 1px #333;  
 color: #fff;  
}

The text inside the footer now should appear pushed down, so that it stays in the dark gray area:

#footer p {  
 padding: 132px 24px 0 24px;  
}

We can create an illusion that the footer extends outside the boundaries of the containing div (#page) by creating a background image for the body. This image will extend the gray area, so it can be a simple, horizontally repeating image:

body {  
 background: #eee url(bg.gif) 0 100% repeat-x;  
 font: 12px/18px "Lucida Grande", Verdana, sans-serif;  
 text-align: center;  
 color: #333;  
}

So now we have a footer that is visually catchier:

Let's do the same for the header. First, we'll add a background image that breaks up the straight-line appearance of the layout:

This image will be positioned toward the bottom of the header, and we'll use the background color to fill the rest of the space:

#header {  
 height: 192px;  
 background: #966 url(header.gif) bottom no-repeat;  
}

Next, let's play with the padding for the header content to make it display more nicely around the background image. The approach you take here will vary depending on the content in your header:

#header p {  
 float: left;  
 padding: 60px 24px 24px 126px;  
 font-size: 1.5em;  
 line-height: 1em;  
 color: #fff;  
}