I am looking to achieve a layout similar to the one below:
The dark grey color represents the sidebar, but I want to use this color as a repeating vertical image in the body element without covering the footer (light gray).
(this is the most straightforward way I have found to extend the dark gray color all the way to the bottom.)
Here is a snippet of my CSS:
body {
color: #888;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%
}
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
/* header */
#header {
background: #444;
}
/* banner */
#header-top {
overflow: hidden;
height: 77px;
width: 960px; /* ie6 hack */
}
#lang {
float: right;
padding: 50px 0 0 0;
}
/* work */
#content {
background: #EEE;
}
#content a {
border-bottom: 0;
}
#mainbar {
overflow: hidden;
margin: 0 10px 0 0;
width: 644;
float: left;
}
#sidebar {
background: #DDD;
color: #777;
overflow: hidden;
margin: 20px 0 10px 0;
padding: 15px;
width: 240px;
float: right;
}
#sidebar h3 {
color: #888;
}
#about {
margin: 0 0 20px;
}
/* footer */
#footer {
color: #777;
background: #DDD;
clear: both;
}
/* contact */
#footer-top {
line-height: 160%;
overflow: hidden;
padding: 30px 0;
width: 960px; /* ie6 hack */
}
#footer-bottom {
font-size: 10px;
margin: 15px auto;
}
This is an excerpt from my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Alex Chen - Web Development, Graphic Design, and Translation</title>
<link rel="stylesheet" type="text/css" href="styles/global.css" />
</head>
<body id="home">
<div id="header">
<div class="container">
<div id="header-top">
</div>
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<div id="mainbar">
</div> <!-- #mainbar-->
<div id=sidebar>
</div> <!-- #sidebar -->
</div><!-- .container -->
</div><!-- #content -->
<div id="footer">
<div class="container">
<div id="footer-top">
</div><!-- #footer-top -->
<div id="footer-bottom">
</div>
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>