CSS Forum

**Truly** · 05-17-2009, 08:08 PM

I tried searching the forum for an answer to this but I couldnt find anything.

I am having problems making a page that has a border that will expand with the rest of the page. Here is the issue. I have the header, and than two fixed columns on each side because it uses a unique gradient and then under those i have a solid coloured image that is set to repeat-y to fill up the remaining space and then there is a footer at the bottom. The problem is that for repeat-y to work I need to set a height but it will totally depend on the text inside and the font size of the users browser. Heres the code:

HTML Code:

<html>
<head><title></title>
<link rel = "stylesheet" href = "test.css">
<body>
<div id="holder">
	<div id="header">&nbsp;</div>
	<div class="clear"></div>
	<div id="leftbar">
		<div id="leftTopside"></div>
		<div id="leftBotside"></div>
		<div class="clear"></div>
	</div>
	<div id="content">
              Lorem Ipsum
	</div>
	<div id="rightBar">
		<div id="rightTopside"></div>
		<div id="rightBotside"></div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
	<div id="footer">&nbsp;</div>
</div>
</body>
</html>

Code:

#holder 
{
width:450px;
height: 100%;
}
#header 
{
  background-image: url('images/test/header.jpg');
  background-repeat:no-repeat;
  height:41px;
  margin-bottom:-2px;
}
#leftBar{
margin:0;
float:left;
height:100%;
padding:0;

}
#rightBar{
margin-left:-1px;
float:left;
height:100%;
padding:0;
}
#leftTopside
{
margin:0;

  background-image: url('images/test/leftTopside.jpg');
  background-repeat:no-repeat;
  height:635px;
  
  width:43px;
}
#rightTopside
{
margin:0;
  background-image: url('images/test/rightTopside.jpg');
  background-repeat:no-repeat;
  width:41px;
  height:635px;
}
#leftBotside
{
margin:0;
  background-image: url('images/test/leftBotside.jpg');
  background-repeat:repeat-y;
height:100%
  width:43px;
}
#rightBotside
{
margin:0;
  background-image: url('images/test/rightBotside.jpg');
  background-repeat:repeat-y;
height:100%;
  width:41px;
}
#content 
{
border:1px solid black;
  background-image: url('images/test/content.jpg');
  background-repeat:no-repeat;
  height:auto;
  width:366px;
  float:left;
}
#footer
{
  background-image: url('images/test/footer.jpg');
  background-repeat:no-repeat;
  height:auto;
}
.clear {
clear:both;
}

I was hoping that I could set rightBotside height:100% because the container block would hold it but instead it repeats the height of the container block rather than just fill up the rest of the space. Any suggestions on how I can avoid this? I am pretty lost on this one.

Thanks

**LadynRed** · 05-17-2009, 08:53 PM

You shouldn't need a height to have the repeat-y work properly, you do, however, you do need to clear your floats for the container to 'stretch' with content and the clear on the footer may not be sufficient. Try overflow:auto on #holder instead. The background repeat shouldn't have the effect you describe.

**Truly** · 03:41 PM

Thanks for the reply Lady but unfortunately it didnt do the trick. What did happen when I set overflow:auto; is that I got a scroll bar which is awful. Even when I do this the image is not repeating.

Do you have other suggestions as to why this is happening [or not happening :)]

Thanks

**LadynRed** · 05-19-2009, 03:43 PM

You will get a scrollbar if you leave the height defined. You'll also get a scrollbar if your dimensions don't add up.

Do you have a URL where we can actually see it ?

**Truly** · 05-27-2009, 07:23 PM

Hey Lady, sorry for not responding sooner. I could still definitely make use of your help. http://www.sustainablewaterloo.org/wip-test/test.html

**LadynRed** · 05-27-2009, 09:51 PM

Ok, the first thing I see is that you have no DOCTYPE on your page. You absolutely must have that if you expect to have any hope of cross-browser compatibility.

**Truly** · 05-28-2009, 01:22 PM

Yeh this is just a test document. I would ultimately have it as a PHP file and include it and that has the doctype. Any suggestions on the code itself though?