Help needed

1

Hello, so here is what I’ve got for my site so far: http://www.notintheface.biz
It has to look like this: http://www.notintheface.biz/images/site.png
Right now I’m focusing on the bars on the left of the site I’m not sure how to go about making it go all the way to the bottom.

Here is my CSS:


body{
 background-color:#2d2d2d;
 background-image:url(images/bg.png);
 background-position:left top;
 background-repeat:repeat-x;
 margin:0;
 padding:0;
}

#header{
 background-image:url(images/logo.png);
 background-position:left top;
 background-repeat:repeat-x;
 width:549px;
 height:77;
 clear:left;
 float: left;
 text-align:left;
}

#bar{
 background-image:url(images/bar.png);
 background-repeat:repeat-y;
 width:100px;
 height:100%;
 clear:left;
 float: left;
 text-align:left;
}

And here is my HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Not in the Face Media</title>

<link rel="stylesheet" href="styles.css" type="text/css">
 
</head> 
 
<body>
 
      <div class="header">
            <img src="images/logo.png" />

        </div>
        <div class="bar">
            <img src="images/bar.png" /><br />

     </div>
     
 
</body>
 
</html>

Any help at all would be appreciated.