1 reply [Last post]
pdgrimm
pdgrimm's picture
Offline
newbie
Last seen: 2 years 37 weeks ago
Timezone: GMT-5
Joined: 2007-12-23
Posts: 6
Points: 9

I have been working on a problem for a bit. I am trying to make the content area of a site be variable height to fit content. There are many ways to do this using 5 or 6 images, but my top piece is 600px high. So I need somehow to have a top image (tall), bottom image, and then a middle filler image. Here is what I have tried

<style type="text/css">
#outer{	
position:relative;
width:920px;
 
}
 
#header{
background:url(css/images/new_background_top.png) center top ;
top:0;
left:0;
height:627px;	
position:absolute;
z-index:10;
width:100%;
 
}
 
#middle{
 background:#03C;	
 
}
 
#bottom{
background:#F00;
position:relative;
width:100%;
bottom:0px;
}
 
#shell{
	position:absolute;
 
	z-index:20;
}
 
</style>
 
</head>
 
<body>
<div id="outer">
   <div id="shell">
   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 shell-->
 
	<div id="header">
header text ...........
	</div><!--  header div-->
    <div id="middle">
    middle
 
 
    </div> <!--   middle div-->
    <div id="bottom">
    bottom text
 
    </div> <!--  bottom div-->
</div><!-- outer div-->  
</body>

This puts the top image where it should be, but not the bottom and middle. And I can't figure out how to have the middle part fill (repeat y). Any ideas will be very welcome.

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

Oops here's the code

<style type="text/css">
#outer{	
position:relative;
width:920px;
 
}
 
#header{
background:url(css/images/new_background_top.png) center top ;
top:0;
left:0;
height:627px;	
position:absolute;
z-index:10;
width:100%;
 
}
 
#middle{
 background:#03C;	
 
}
 
#bottom{
background:#F00;
position:relative;
width:100%;
bottom:0px;
}
 
#shell{
	position:absolute;
 
	z-index:20;
}
 
</style>
 
</head>
 
<body>
<div id="outer">
   <div id="shell">
   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 shell-->
 
	<div id="header">
header text ...........
	</div><!--  header div-->
    <div id="middle">
    middle
 
 
    </div> <!--   middle div-->
    <div id="bottom">
    bottom text
 
    </div> <!--  bottom div-->
</div><!-- outer div-->  
</body>