I am trying to neaten up the pages on my site, I want the main container to be 100% of the contents (some pages are alot longer than others) however when I set it to 100% is doesn't seem to copy the background image down, unless I make is a fixed height. The contents of the container consist of a menu on the left hand side (which I would like to fill the space to the bottom, can this be made to expand to the height in the parent?) and the right hand has the page contents. the idea being that the side menu and contents end neatly and then I put a neater footer on the bottom. At the moment, the long pages are fine, but sparser pages have a huge blank space at the bottom.

 

example of the problem can be found at

 

http://www.castlemotorcycles.co.uk/template/

 

CSS - http://castlemotorcycles.co.uk/template/castletemplate.css

 

I've tried googling it but I can't seem to find a way to do it.

 

Thanks

I'm not 100% sure what you mean and looking at the example page doesn't massively help either.

 

I'm not sure which image(s) you mean. Something to point out straight away is an image in CSS (background) can't be "stretched" only repeated.

 

If you want a container to stretch to 100% height you have to ensure the parent containers are also 100% height. This sounds like a similar solution to a "sticky footer" (that always shows at the very bottom of the page/browser, no matter how much content). Have a search online for more info on that....it may help.

 

Looking at your code is kinda strange. You have a lot of unnecessary elements (divs mainly) which a lot of don't even have any styling to. Then inside these divs you have tables. Weird. Good to see your code at least validates but it's still really messy.

 

The div with the id of "pagebox" appears to be what you're talking about. Strange code, strange labeling for your id and class names. Looks like you'll need to change/remove and add some containers. I'd say check the sticky footer solutions out and that will offer insight into how to sow 100% height.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

As Mesa said above...not entirely sure what you're trying to fix, but...

 

I think that you want the content background to carry on repeating down the page.

 

The left column & pagebox are both being floated in the CSS...if you clear the float before the end of the content container, I think it will fix that problem....assuming thats what you're trying to sort out.

 

an easy way to do this is to make a class in the CSS:

.clear {
   clear: both;
   float: none;
}

 

then insert a div before the end of the content container...

<div class="clear"></div>

 

Also as mentioned - tables inside divs = confusing

YAY!

I didn't explain it to well in the original post, Thanks Craftygeek! this worked, I was about ready to throw the computer in the river. I'll try and clean up the coding like Mesa suggested aswell, It's quite easy to find yourself with an ever increasing number of boxes and classes!

*edit* sorry ignore this one.