<div> left navigation bar

[CTtactical]

Hi im working on a site where there is a nav bar on the left side, i have the page going with a header div, left div, main div and footer div. It looks fine when the browser window is normal size, but when you make it smaller the content gets squished downward and the background image in the left div ends and the gray space of the body bg is all that shows.

So what i am asking is, is there a way to make the left div be constantly touching the header and footer, even when the main content part gets elongated when the browser window is narrowed?

I hope you can understand what im trying to say...

[msparks]

Could use post your CSS?

[CTtactical]

Here is the div portion of my CSS:

div.container
{
vertical-align:top;
width:98%;
border:1px;
border-left: 10px solid #CCCCCC;
background-color: #999999;
line-height:150%;
}

div.header
{
color:black;
background-color:gray;
clear:left;
border-top:5px solid #333333;
border-right: 5px solid #333333;
border-left:5px solid #333333;
border-bottom:3px solid #333333;
}


div.footer
{
color:black;
background-color:gray;
clear:left;
padding: 12px;
border-top:6px solid #333333;
border-left:5px solid #333333;
border-right:5px solid #333333;
border-bottom:5px solid #333333;
margin-top:-19px;
}

div.left
{
float:left;
background-image:
url('dcs.jpg');
padding:23.75px;
background-repeat: repeat-y;
border-left: 5px solid #333333;
border-right:5px solid #333333;
}

div.content
{
margin-left:230px;
margin-right:30px;
}

[msparks]

I'm not sure why, but I'm not having that problem when I run your code. Here's what I did.

CSS:
#container
{
vertical-align:top;
width:98%;
border:1px;
border-left: 10px solid #CCCCCC;
background-color: #999999;
line-height:150%;
}

#header
{
color:black;
background-color:gray;
clear:left;
border-top:5px solid #333333;
border-right: 5px solid #333333;
border-left:5px solid #333333;
border-bottom:3px solid #333333;
}


#footer
{
color:black;
background-color:gray;
clear:left;
padding: 12px;
border-top:6px solid #333333;
border-left:5px solid #333333;
border-right:5px solid #333333;
border-bottom:5px solid #333333;
margin-top:-19px;
}

#left
{
float:left;
background-image:
url('dcs.jpg');
padding:23.75px;
background-repeat: repeat-y;
border-left: 5px solid #333333;
border-right:5px solid #333333;
}

#content
{
margin-left:230px;
margin-right:30px;
}

HTML:
<div id="container">
<div id="header">
Header
</div>

<div id="left">
Left
</div>

<div id="content">
Content
</div>

<div id="footer">
Footer
</div>
</div>