After making progress, I hit a roadblock that has me stumped.
The issue I'm facing is with the wrapper height setting. If I set it to auto, it stops at the bottom of the content, leaving the background exposed when the content is shorter than the window. But if I set the wrapper to 100%, it doesn't function as intended.
When the screen is maximized, the unnecessary scrolling makes the page taller than the window height.
On the flip side, when the window is smaller, the background creeps up behind the content. I want to prevent unnecessary scrolling when it's not needed and ensure the wrapper's background still covers the content when the window is shrunk. How can I resolve this?
Edit
<div id="xwraper">
<div id="wraper">
<br class="cl cr" />
<div id="imgholder">
<div class="slider">
<ul>
<li rel="1">
<img src="id_tags_1.png" width="510" height="340" alt=" " />
<h4> </h4>
</li>
<li rel="2">
<img src="id_tags_2.png" width="510" height="340" alt=" " />
<h4> </h4>
</li>
<li rel="3">
<img src="id_tags_3.png" width="510" height="340" alt=" " />
<h4> </h4>
</li>
<li rel="4">
<img src="id_tags_4.png" width="510" height="340" alt=" " />
<h4> </h4>
</li>
</ul>
<div class="clear controls">
<img src="../../img/white-arrow-left.png" width="10" height="13" alt="<" class="prev" />
<span class="pages">
<img src="../../img/blank.gif" width="13" height="14" alt=" " class="number hide selected 1" />
<img src="../../img/blank.gif" width="13" height="14" alt=" " class="number hide 2" />
<img src="../../img/blank.gif" width="13" height="14" alt=" " class="number hide 3" />
<img src="../../img/blank.gif" width="13" height="14" alt=" " class="number hide 4" />
</span>
<img src="../../img/white-arrow-right.png" width="10" height="13" alt=">" class="next" />
</div>
</div> </div>
<div id="desc">
<p>Identification Tags are a versatile, cost effective way to get your marketing message out. Used by travelers, sports teams, schools, health clubs, athletes and organizations, these tags are durable and each comes with it's own clear lanyard.</p>
<p>The back of each tag can be written on or we'll print another message on them for you. Choose one of our standard sizes, or we'll work with your custom size and shape. Please call Customer Service for pricing on custom shapes and sizes.</p>
<ul>
<li class="ulhead center">Product Specific Info.</li>
<li class="ulhead">Stock</li>
<li>Printed on durable .020” thick plastic</li>
<li class="ulhead">Color</li>
<li>Neon and metallic colors are not available on Identifcation Tags</li>
<li class="ulhead">Production Time</li>
<li>Standard production time is approximately 10 days</li>
<li class="ulhead">General</li>
<li>Tags with no imprint are available, write or call for pricing</li>
<li><a href="../../contact_us.php">Contact us</a> for a quote on custom sizes or shapes</li>
</ul>
</div>
<br class="cl cr" />
<table id="pb">
<tr>
<td> </td>
<td>
<table>
<tr class="bold">
<td> </td> <td>125</td> <td>250</td> <td>500</td> <td>1,000</td> <td>1,500</td>
</tr>
</table>
</td>
</tr>
...
</div>
And the css for the wrappers:
#xwraper {
position:absolute;
left:50%;
top:0px;
width:1px;
height:100%;
overflow:visible;
z-index:-3;
}
#wraper {
position:absolute;
left:-450px;
top:0px;
width:900px;
height:100%;
padding-top:110px;
background-color:#FFFFFF;
border-left: solid 5px #003860;
border-right: solid 5px #003860;
z-index:inherit;
}