# 100% height problem! I don't understand!



## rick87 (Oct 10, 2005)

here is the page: http://creamycoffee.com/punk.html

I want the two images (punk_02, punk_04) on the side to repeat down the sides according to the length of the content. I've tried and tried everything I can think of. I don't understand. HELP!

Currently, the images will stay at a certain length when specified '100% height' but if i say, 3000px, they will go down like they are supposed to. I know this has to do with a wrapper, but I don't understand. 

Can someone help me and explain what is going on? and how to fix it?

Thanks for your time!


```
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>punk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css"> 
*{margin:0;padding:0;} 
html, body {height:100%;} 

#wrapper{height:100%;background:#fff;} 
body>#wrapper{height:auto;min-height:100%;} /*child hack overrides height in compliant browsers and adds min-height, which they understand*/ 
</style> 

</head>


<!-- ImageReady Slices (punk.psd) -->

<div style="position:absolute; left:0px; top:0px; width:936px; height:100%;">
	<div style="position:absolute; left:0px; top:0px; width:936px;">
		<img id="punk_01" src="images/punk_01.gif" width="936" height="144" alt="" />
	</div>


	<div style="position:absolute; left:118px; top:144px; width:700px; height:108px;">
		<img id="punk_03" src="images/punk_03.gif" width="700" height="108" border="0" alt="" usemap="#punk_03_Map" />
	</div>



<div class="wrapper">

<div style="position:absolute; background-image:url(/images/punk_02.gif); 
 background-repeat:repeat-y; left:0px; top:144px; width:118px; height:100%;">
		<img id="punk_02" src="images/punk_02.gif" width="118" height="756" alt="" />
	</div>



	<div style="position:absolute; background-image:url(/images/punk_04.gif); 
 background-repeat:repeat-y; left:818px; top:144px; width:118px; height:100%;">
<img id="punk_04" src="images/punk_04.gif"  />
		
	</div>

	<div style="position:absolute; background-image:url(/images/punk_05.gif); 
 background-repeat:no-repeat; left:118px; top:252px; width:700px; height:20px;">


<br><br>
<br><br><br><br>
<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader>
<b><$MTEntryDate format="%x"$></b>
</MTDateHeader>

<br><b><id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></b>

<$MTEntryBody$>

<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>

<p class="posted">Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</p>
<img src="images/punk_06.gif">
</MTEntries>


</div>
</div>	
	
</div>
<map name="punk_03_Map" id="punk_03_Map">
<area shape="rect" alt="" coords="270,79,358,108" href="http://creamyocoffee.com/contact" />
<area shape="rect" alt="" coords="133,79,225,108" href="http://creamycoffee.com/notwork" />
<area shape="rect" alt="" coords="27,79,85,108" href="http://creamycoffee.com/work" />
<area shape="rect" alt="" coords="50,11,359,60" href="http://creamycoffee.com" />
</map>
<map name="punk_05_Map" id="punk_05_Map">
<area shape="rect" alt="" coords="270,0,358,3" href="http://creamyocoffee.com/contact" />
<area shape="rect" alt="" coords="133,0,225,3" href="http://creamycoffee.com/notwork" />
<area shape="rect" alt="" coords="27,0,85,4" href="http://creamycoffee.com/work" />
</map>
<!-- End ImageReady Slices -->
</body>
</html>
```


----------



## E-Liam (Jan 1, 2004)

Hi Rick, and welcome to TSF.. 

So you want the two images to fill the entire back ground outside of the main content however large the page becomes?

Scratch that, I've just looked at your live code and you've changed the images to teh body background. Job done. I like easy ones like this.

Cheers

Liam


----------

