Article
Breaking Out of the Box With CSS Layouts
We can use this method of applying an additional background image to make the header appear to extend outside of #page. To do so easily, we can wrap a div around the page, and use that when we apply the background image (since body is already using an image for the #footer). Here's the final HTML:
<!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="wrap">
<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…</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 more →</a> </p>
</div>
<div id="footer">
<p>Photograph by <a href="http://jinabolton.com">Jina Bolton</a>.</p>
</div>
</div>
</div>
</body>
</html>
Then we can add the CSS needed:
#wrap {
background: url(wrap.gif) repeat-x;
}
And here's the final CSS:
* {
margin: 0;
padding: 0;
}
body {
background: #eee url(bg.gif) 0 100% repeat-x;
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;
margin-left: -108px;
padding: 15px 0 21px 108px;
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 {
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;
}
h3 {
padding-bottom: 6px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -1px;
color: #633;
}
#wrap {
background: url(wrap.gif) repeat-x;
}
#page {
margin: 0 auto;
width: 960px;
background: #fff url(page.gif) repeat-y;
text-align: left;
}
#header {
height: 192px;
background: #966 url(header.gif) bottom no-repeat;
}
#header p {
float: left;
padding: 60px 24px 24px 126px;
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: 12px 24px 60px 24px;
width: 528px;
}
#content-primary p {
padding-bottom: 18px;
}
#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;
}
#content-secondary p {
padding-bottom: 18px;
}
#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;
}
#footer a:link, #footer a:visited {
color: #c99;
}
#footer p {
padding: 132px 24px 0 24px;
}
.clear {
clear: both;
}
Here's the result:
Taking it Further
A lot more can be done to "break out of the box". You can get much more experimental with your background images, or go a little crazy with margins -- both of which are explored in detail in The Art & Science of CSS, on which I was a co-author. While what we've discussed here was definitely a minimal approach, hopefully it will get you thinking of fun things you can try (and move beyond the thinking that CSS designs have to be boring). So have fun with it. Check out the book, as well as some of my favorite sites that use fun box-breaking techniques:
Apple iPod Shuffle: I really like the iPod shuffle and headphones that appear to be "peeking" out from behind the container.
Tingsek: I'm a big fan of horizontal "bars" that fill the entire screen -- I think it's a great way to avoid a totally contained, boxy feeling. The post-it note's angle also helps break the design up a bit, along with the background photo of Tingsek.
CSS Zen Garden, Entry #194: Background images really help this layout to avoid feeling boxy, even though it follows a basic grid.
