Article
About the Author
Jina Bolton
Jina Bolton is a visual interaction designer in Silicon Valley living in San Francisco. She is a co-author of The Art & Science Of CSS and holds a BFA in Computer Arts and Graphic Design from Memphis College of Art.
Breaking Out of the Box With CSS Layouts
Every day this week, we'll be publishing an article that's been hand picked by our editor, as part of CSS Theme Week.
One of the most commonly used arguments regarding CSS that I hear from designers who don't like web standards is, "CSS designs are so boring. They're too boxy." I can't help but find this statement to be a bit silly. To me, that's like saying buildings built with wood are boxy. An architect can create a boring-looking building. But, using the same tools, an architect can create a stunning work of art. It all depends on creativity and experimentation.
It's true that CSS is heavily reliant upon a grid -- everything flows on x and y axes (and can be positioned as such, much like designs built in Photoshop). However, this doesn't mean that your design has to be boring. If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting. In achieving this goal (while supporting flexibility and maintainability), CSS designs have so much more to offer than table-based layouts.
Before you begin, be sure to download the files that I used to produce these examples, so you can follow along.
Grids and Wireframes
"You have to know the rules before you can break them."
I heard this common saying throughout my design and art classes when I was studying. If you've taken any classes in typography or layout, you know that the grid is one of the most important essentials in design. However, if you aren't familiar with this concept, here's a very brief overview:
- A grid provides organization. A grid can act as your page layout's "blue plan." Well-planned grids can be aesthetically pleasing, as well as providing organization to your content.
- A grid can define more information. A well-organized layout can help provide consistency from page to page, and define what type of information is being provided at various points (for example: a sidebar can be used to provide secondary information; copyright and legal information, etc. might be placed in the page footer, and so on).
- A grid can unify a series. Having a planned guide for the placement of logos, headlines, images, and/or text in any medium (business cards, advertisements, web site layouts, etc.) can help "tie" everything together. Therefore, a grid can be a very important element of a brand.
For web design, wireframes are used to plan a site's grid. Wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements within the interface.
Wireframes are a great way to design your site's layout without actually worrying about the artistic details. They allow you to focus purely on the placement of your content (navigation, body copy, headlines, etc.). This technique is practiced in print design as well, but for this article, we're going to focus on the Web.
Wireframes also provide a guide for your site's markup and style sheet. For example, if your site has a multi-column layout (a content area, and one or two sidebars), you can use markup (usually a <div> tag, though this can vary depending on the content) to define those areas, styling them into columns, rows, or whatever is determined by your wireframe. You can take the same approach to style your header, or masthead, and footer.
Knowing the "setup" on the front end will give you more insight into how the site should be structured (which is a good thing to have in the back of your mind when you do start applying artistic detail).
Now, normally, in the typical design workflows with which I've been involved, the design is finalized after the wireframe is created. The content is then created before any coding begins. However, for the purposes of this article, the content is being created on a whim, so the code will come into play early on, just for learning purposes. Once this process comes more naturally, a "regular" workflow can be established. But for now, let's just explore the power of CSS. (Wow, that last bit sounded dramatic!)
Starting our Design
Here's an example of a grid that you may typically see on a web site:
I decided to take advantage of the width of 960px: I divided by five, which gave me 192px. I used this as my grid unit -- columns will be this width, and all other design elements will be proportional to it. The header is 192px tall as well.
The markup and style for this layout could be pretty straightforward; it would probably look something like this HTML (to which I've added dummy copy):
<!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" lang="en" xml:lang="en">
<head>
<title>Example Layout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="page">
<div id="header">
<p>Header content</p>
</div>
<div id="content-primary">
<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>
<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>
<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">
<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 more →</a> </p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Here's the CSS:
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#page {
margin: 0 auto;
width: 960px;
text-align: left;
}
#header {
height: 192px;
}
#content-primary {
float: right;
width: 768px;
}
#content-secondary {
float: right;
width: 180px;
}
#footer {
clear: right;
}
.clear {
clear: both;
}
The margins and padding on all elements are reset using an asterisk (*). This sets the styles to be applied to everything. Read more on this technique, as documented by Andrew Krespanis.
This example uses the standard method of centering the design: I've set text-align: center for the body, margin: 0 auto, a width (in this case, 960px), and text-align: left for the containing div (which I've called "page").
Next, the content divs (content-primary and content-secondary) float to the right. content-primary appears first in the markup, so this is the direction needed to align the columns properly next to each other. Finally, the columns are cleared in the footer.
So far, this is what we have:
