Please take a look at the following page… http://www.workbygee.co.uk/proofs/spencerdavis/test.html
I am trying to make it so that the white ‘page’ background stretches to accomodate the content of the site, but as you will notice it does not.
The way I have designed it thus far is as follows:
I have created a wrapper div to contain and center all of the page content. This div has a background image that repeats vertically and forms the sides of the ‘page’ image in the background.
I have then placed another div at the top and the bottom of the layout, one z-index higher, to create the top of the page image and the bottom with the peeling corner. The bottom image is set in the css to position absolutely to bottom:0; and left:0; so that it always sits at the bottom of the browser window.
All of the layout elements are nested within the wrapper in the hope that it will then stretch to accomodate all the content.
I have given the body a height value of 100% and the wrapper div the same.
It works to the extent that the layout stretches to the height of the browser window but it doesn’t stretch any further if the content overflows, as you can see. If you resize the browser window to be smaller it adjusts the size of the layout, but only when making it smaller.
I’m sure there is a simple answer to this but it is completely eluding me. Any help or suggestions would be greatly appreciated. I appreciate I may also be going about this in completely the wrong fashion so am open to suggestions of a different strategy.
If you need to see the css it is here… http://www.workbygee.co.uk/proofs/spencerdavis/style_spencerdavis.css
Many thanks for your time,