Well I have been designing a website for my teacher as a lil advanced project he has given me, so far it has only been designed for IE7 (im going to make it cross browser compatible later)
but my problem is with the stretch of the side navigation. I want my side navigation to stretch with the content box as it grows, so i can have a nice black border going all the way down the page along with the side nav, Right now since the side navigation does not stretch down with the content, the border does not stretch itself down, So I am hoping somebody here can solve my dilemma. All I need is the side navigation divs to stretch itself down as the content part of the page gets longer. heres the code:
Code:
<!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" xml:lang="en" lang="en">
<head>
<title>MR Technical Test</title>
<style type="text/css">
/*-------------Misc.-------------*/
html, body{
height:100%;
}
body{
min-width:850px;
margin:0px;
padding:0px;
}
/*--------------------------------*/
/*-------------Header------------*/
.headercontain
{
width:100%;
height:150px;
background-image:url('headergrad.png');
margin:0px;
padding:0px;
}
.logo
{
width:470px;
height:150px;
background-image: url('mrtlogo.png');
clear:right;
}
.slogan
{
position:absolute;
top:115px;
left:275px;
font-family:verdana, sans-serif;
color:#9E9191;
}
.quote
{
position:absolute;
top:15px;
left:500px;
min-width:25%;
}
div.headerstrip
{
height:25px;
width:100%;
background-color:#8D1D1D;
margin:0px;
padding:0px;
}
h3.header
{
color:white;
text-align:center;
position:absolute;
left:55%;
}
/*-----------------------------------*/
/*---------------Topnav--------------*/
div.topnav
{
width:100%;
height:30px;
background-image:url('navtopgrad.png');
border-right:1px solid black;
}
ul.move
{
float:right;
position:relative;
bottom:25px;
padding-right:25%;
}
li.topnav
{
display:inline;
padding-left:1em;
}
a.topnav
{
color:#000000;
text-decoration:none;
}
a.topnav:hover
{
color:#8D1D1D;
text-decoration:none;
}
div.search
{
background-color:#8D1D1D;
width:200px;
padding:0px;
height:30px;
color:#ffffff;
padding-left:3px;
}
div.search
{
background-color:#8D1D1D;
width:200px;
padding:0px;
height:30px;
color:#ffffff;
padding-left:3px;
}
/*-----------------------------------*/
/*----------------Side navigation------------*/
div.navside
{
border-right:1px solid black;
width:203px;
float:left;
min-height:200%;
padding:0px;
margin:0px;
}
div.undernav
{
background-image:url('contentgrad.png');
background-color:#000099;
background-repeat:repeat-x;
border-right:1px solid black;
min-height:150px;
height:100%;
width:203px;
}
h3.navside
{
text-align:center;
position:relative;
top:25%;
}
div.navbutton
{
width:202px;
height:50px;
background-image:url('sidebtngrad.png');
border-bottom: 1px solid black;
border-left: 1px solid black;
}
/*------------------------------------*/
/*----------------Content--------------*/
div.contentcontain
{
width:100%;
background-image:url('contentgrad.png');
background-repeat:repeat-x;
padding:0px;
}
div.contenthead
{
width:70%;
height:25px;
background-color:#8D1D1D;
margin:auto;
margin-top:2em;
}
h3.contenthead
{
color:white;
text-align:center;
}
div.contentbox
{
border:1px solid #8D1D1D;
width:69.8%;
margin:auto;
padding:0px;
background-image:url('contentboxgrad.png');
background-color:#FEFEFE;
background-repeat:repeat-x;
min-height:110px;
}
p.contentbox
{
padding:1em;
}
a.read
{
color:#4D7DF7;
text-decoration:none;
font-weight:bold;
float:right;
padding-right:1em;
margin:0px;
}
/*-------------------------------------*/
/*--------------Footer-----------------*/
div.footer
{
width:100%;
height:25px;
background-color:#8D1D1D;
border:1px solid black;
}
/*-------------------------------------*/
</style>
</head>
<body>
<!-- Header -->
<div class="headercontain">
<p class="quote">"To be concious that you are ignorant of the facts is a great step to
knowledge"<br />
- Benjamin Disraeli</p>
<div class="logo">
<h4 class="slogan">My Slogan Here</h4>
</div>
</div>
<!-- Start Top Navigation -->
<div class="topnav">
<div class="search">
<form class="search">
Search: <input type="text">
</form>
</div>
<ul class="move">
<li class="topnav"><a href="#" class="topnav">Home</a></li>
<li class="topnav"><a href="#" class="topnav">Archives</a></li>
<li class="topnav"><a href="#" class="topnav">Downloads</a></li>
<li class="topnav"><a href="#" class="topnav">Support</a></li>
<li class="topnav"><a href="#" class="topnav">About</a></li>
<li class="topnav"><a href="#" class="topnav">Services</a></li>
</ul>
</div>
<!-- End Top Navigation -->
</div>
<!-- End Header -->
<!-- Start Content and Side navigation -->
<div class="contentcontain">
<!-- Start headerstrip -->
<div class="headerstrip">
<h3 class="header">Header Here</h3>
</div>
<!-- End Headerstrip -->
<!-- Start Sidenavigation -->
<div class="navside">
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Home</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Sample Tags</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Template Info</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Free Templates</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Premium Templates</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Affiliates</h3></a>
</div>
<!-- Make div.undernav Expand with the content, cannot figure out how to -->
<div class="undernav">Test
<!-- End --></div>
</div>
<!-- End Side navigation -->
<!-- Start Content -->
<div class="contenthead">
<h3 class="contenthead">Support Styleshout</h3>
</div>
<div class="contentbox">
<p class="contentbox">
If you are interested in supporting my work and would like to contribute, you are welcome
to make a small
donation through the
donate link on my website - it will be a great help and will surely be appreciated.
</p>
<a href="#" class="read">Read More...</a>
</div>
<div class="contenthead">
<h3 class="contenthead">Template Info</h3>
</div>
<div class="contentbox">
<p class="contentbox">
Template Info
Refresh is a free, W3C-compliant, CSS-based website template by styleshout.com
. This work is distributed under the Creative
Commons Attribution 2.5 License, which means
that you are free to use and modify it for any purpose. All I ask is that you include a
link back to my website in your credits.For more free designs, you can visit my website
to see my other works.Good luck and I hope you find my free templates useful!
</p>
<a href="#" class="read">Read More...</a>
</div>
<div class="contenthead">
<h3 class="contenthead">Template Info</h3>
</div>
<div class="contentbox">
<p class="contentbox">
Template Info
Refresh is a free, W3C-compliant, CSS-based website template by styleshout.com
. This work is distributed under the Creative
Commons Attribution 2.5 License, which means
that you are free to use and modify it for any purpose. All I ask is that you include a
link back to my website in your credits.For more free designs, you can visit my website
to see my other works.Good luck and I hope you find my free templates useful!
</p>
<a href="#" class="read">Read More...</a>
</div>
</div>
</div>
<!--End Content and Side navigation -->
<!--Start Footer-->
<div class="footer">
</div>
</body>
</html>
and heres a zip file of the .htm and the pictures if you would like them:
MR T-lhs-b3-03.zip
Before you post, read our: 
