I want to get something like
the following:
The dark grey is
the sidebar but I want to apply that color into
the body element as an image which repeats itself vertically but at
the same time doesn't cover
the footer (light gray).
(this is
the easiest way I found to stretch
the color (dark gray) until
the bottom.)
Part 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;
}
Part of 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>
