...

View Full Version : automatic height



rondog
11-03-2008, 12:21 AM
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>

GardenGnome2
11-03-2008, 12:22 AM
I don't know much but just take out the width setting.

rondog
11-03-2008, 12:53 AM
nevermind figured it out

itsallkizza
11-03-2008, 12:58 AM
<!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 {
position: relative;
width: 595px;
padding-right: 290px;
float:left;
background: #c8cfac url("images/rightcolbg.jpg") repeat-y right top;
}
#rightcol {
position: absolute;
top: 0px;
right: 0px;
width: 290px;
}
/*
* 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 {
height: 100%;
background-color: #e2e8cc;
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="rightcol">
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
<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>&nbsp;
</div>
</div>
</div>
</body>
</html>


Concept:
Wrap your content inside your rightcol div so that it stretches it out for you.

How:
Give the content container a padding-right of however wide your right col should be. Move the rightcol background to the content container. Give the actual content an overlay background to match your page background. Position your rightcol absolutely to the top right of your content container.

And there you go.

itsallkizza
11-03-2008, 12:59 AM
Dang, went to all that trouble for nada... *tear*

toothmkr57
11-03-2008, 01:16 AM
not for nada, I learned something and it wasn't even for me... I've actually changed a couple of ides for layouts because I didn't think of that, Thanks!

itsallkizza
11-03-2008, 01:23 AM
anytime :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum