I have a column on the right side of my content that I want to stretch to the height of my content. The column will rarely ever have more content then the actual content div itself. Anyway the div I need to stretch is called #rightcol. Here you can see what I mean: http://ronnieswietek.com/hosted/ostari/
The column on the right is set to 300px right now to demonstrate, but I need it to stretch to the bottom. Here is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*
* Layout and global styles
*/
body {
margin: 0px;
padding: 0px;
background-color: #e2e8cc;
font-family: "Verdana", Arial, Helvetica, sans-serif;
}
#header {
margin: auto;
height: 174px;
background:url("images/headerbg.jpg") repeat-x;
}
#logo {
height: 129px;
}
#nav {
margin: auto;
width: 885px;
height: 45px;
background:url("images/navbg.jpg") repeat-x;
}
#wrapper {
margin: auto;
width: 885px;
}
#contentHolder {
width: 595px;
float:left;
}
#rightcol {
width: 290px;
height:300px;
float:right;
background: url("images/rightcolbg.jpg") repeat-y #c8cfac;
}
/*
* Navigation styles
*/
.nav {
margin: auto;
list-style: none;
}
.nav li {
font-size: 12px;
margin-top: 15px;
padding-left: 30px;
color: #fff;
float: left;
display: inline;
}
/*
* Content layout (left column)
*/
#content {
padding-top: 20px;
padding-right: 10px;
/*padding: 12px;*/
}
/*
* Content styles (left column)
*/
.pageTitle {
color: #514016;
margin-top: 15px;
padding-bottom: 5px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 32px;
}
.ptext {
font-size: 13px;
line-height: 1.6em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="nav">
<ul class="nav">
<li>HOME</li>
<li>SOLUTIONS</li>
<li>SUPPORT</li>
<li>ABOUT OSTARI</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="contentHolder">
<div id="content"> <img src="images/homeimg.jpg" title="im a home image" />
<span class="pageTitle">Welcome to Ostari</span>
<p class="ptext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus feugiat congue diam. Nullam imperdiet lorem nec magna. Aliquam varius venenatis augue.
Donec ut odio ut eros tincidunt tincidunt. Vivamus tincidunt urna vel sem. Proin accumsan pede et diam. Ut id ipsum sed augue ultricies interdum. Sed et
libero. Aliquam dignissim viverra magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique, nunc
eu consectetuer mattis, lectus tellus pharetra neque, in suscipit ipsum nunc non arcu. Nam id diam. Maecenas scelerisque. Integer tincidunt. Donec dictum,
quam quis congue tempor, turpis purus sodales enim, sit amet malesuada ipsum neque id sapien. Sed suscipit. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Suspendisse pede.</p>
<p class="ptext">Ut tristique. Donec laoreet lacinia orci. Quisque sed lectus. Curabitur est sapien, cursus quis, tempus id, molestie imperdiet, massa. Vivamus ultricies.
Phasellus at tortor sit amet massa sollicitudin scelerisque. Proin vehicula, orci eget ornare fringilla, sem sem placerat est, nec auctor magna felis non augue.
Aliquam id justo. Curabitur vel lectus et libero sollicitudin congue. Sed a dui. Donec sit amet sem vitae est auctor fermentum. Ut congue vestibulum neque.
Curabitur malesuada turpis. Nam fermentum convallis felis. Etiam lacus. Suspendisse eget pede. Cras diam lectus, faucibus sed, posuere at, aliquam ut, diam.</p>
</div>
</div>
<div id="rightcol"></div>
</div>
</body>
</html>
