No replies
pdgrimm
pdgrimm's picture
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT-5
Joined: 2007-12-23
Posts: 6
Points: 9

Hey guys, I tried to create this topic yesterday. I need to create a div, variable in height, with a tall top piece, a repeating-y midsection, and a footer. And have it expand to the text on top. I couldn't find how to do this, so I worked for a while. I got something to work, and really don't know why.

Here's the site
http://www.tanyascakes-n-more.com/tanya%20template/boxtry.html

And here is the 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">
#outer{	
position:relative;
width:920px;
 
}
 
#header{
 
top:0;
left:0;
height:20px;	
position:absolute;
z-index:20;
width:100%;
overflow:visible;
margin-top:-627px;
}
 
 
 
#bottom{
background:#F00;
position:relative;
width:100%;
bottom:0px;
background: url(css/images/new_background_bottom.png) center bottom;
}
 
#shell{
/*	padding-top:-10px;
	margin-top:20px;*/
	position:relative;
	z-index:40;
	background:url(css/images/new_background_middle.png) ;
	background-repeat:repeat-y;
	margin-top:627px;
	padding-top:1px;
	}
 
#divshell{
margin-top:-627px;
padding:10px;
}
 
</style>
 
</head>
 
<body>
<div id="outer">
   <div id="shell">
   <div id="divshell">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!
   <br />
   bottom of shell
   <br />
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor nunc, scelerisque faucibus ornare sit amet, tempor quis risus. Fusce commodo dolor in mi ornare eu consequat libero luctus. Quisque congue, nibh quis luctus vestibulum, dui odio iaculis nunc; ut interdum magna elit vel nunc. Sed massa risus, eleifend quis gravida et, porta sit amet lacus? Nam ipsum arcu, elementum id suscipit a, lobortis quis quam. Nulla facilisi. Pellentesque ornare blandit bibendum. Vivamus congue nulla porta turpis pulvinar elementum elementum est consectetur. Maecenas iaculis viverra ligula! Aliquam sed dui nunc, non fermentum quam. Duis commodo, erat non malesuada cursus, lacus massa laoreet lectus, ut dapibus leo ipsum in ligula!
 
 
</div> <!-- end divshell-->
 
  </div> <!-- end shell-->
 
	<div id="header">
    	<img src="css/images/new_background_top.png" width="920" height="627" />
 
	</div><!--  header div-->
 
    <div id="bottom">
    bottom text
 
    </div> <!--  bottom div-->
</div><!-- outer div-->  
</body>
</html>

It only works when I have a padding-top value for #shell. So I set it at 1px. When I remove it, it messed it all up. Am I doing this the correct way? Any ideas on why the padding in the shell has such a big impact?