Page height problem

[otester]

I have some curtain/shadowy thing that runs down the sides between the white/orange on my site, but they only work when I set a height %, this however locks the page length which causes problems on a few pages.

 

Is it possible to make the length dynamic but also keep the curtains.

 

Site has a super container, inside that is the left curtain, main container then right curtain.

 

Here is the CSS:

 

	html, html body {
	font-family:arial,helvetica,sans-serif;
	font-size:12px;
	color:#000;
	height:111%;
	background:#F90;
	margin-top:0px;
}

#left_curtain {
	background-image:url(../images/left_curtain.png);
	background-repeat:repeat-y;
	float:left;
	height:inherit;
	width:40px;
}
#right_curtain {
	background-image:url(../images/right_curtain.png);
	background-repeat:repeat-y;
	float:right;
	height:inherit;
	width:40px;
}

 

Any help would be greatly appreciated,

 

Thanks,

 

otester

[linus72982]

Ideally you would want to make the "curtains" a background for the wrapper div and then it will extend down to fit the content.  A background image on repeat will only go as far as the height, if you don't define a height and have nothing in the div (a background image doesn't count as an item in a div) then it won't have any height.  As you add things to the div, the height shrink wraps to fit and then applies whatever background it can.  I would suggest making an image the width of your wrapper and maybe a height of 30px or something, then paint the edges of that image so that when you repeat the image down it appears to be curtains, then just add this as the background image of your wrapper and put in background-repeat: repeat-y;

 

Any reason that wouldn't work?

 

I can't think of any other way to dynamically change the height of an element based on the height of another element, I think you'll have to nest it.

[otester]

Ideally you would want to make the "curtains" a background for the wrapper div and then it will extend down to fit the content.  A background image on repeat will only go as far as the height, if you don't define a height and have nothing in the div (a background image doesn't count as an item in a div) then it won't have any height.  As you add things to the div, the height shrink wraps to fit and then applies whatever background it can.  I would suggest making an image the width of your wrapper and maybe a height of 30px or something, then paint the edges of that image so that when you repeat the image down it appears to be curtains, then just add this as the background image of your wrapper and put in background-repeat: repeat-y;

 

Any reason that wouldn't work?

 

I can't think of any other way to dynamically change the height of an element based on the height of another element, I think you'll have to nest it.

 

My current workaround (which seems to work ok) is just setting the height of the curtain divs to the height of the wrapper.