[RESOLVED] <DIV> BG Image and Padding problem.

[Barton68]

Hi,
I have a left column and a right display area of images. The left column and display area are constructed with <DIV>s. The left column has a background image and some textual links.

If the display area goes further down the webpage then the left column, the BG image of the left column <DIV> doesn't extend/display to the bottom of the page. This only happens when I use 'padding-bottom: XXXpx' in the CSS definition for the <DIV>, and 'height: 100%'.
The problem is that the number of images in the display area is variable so that the padding-bottom value can not be fixed.

Q, Is there any automatic way to 'pad out' the left column <DIV> or get the BG image to display down to the bottom of the webpage?

[ryanbutler]

The only reliable way is to contain both left and right columns inside a wrapper and assign background images or columns in that wrapper. For example:

#wrapper{
background-image:url(images/wrapper.jpg);
background-repeat:repeat-y;
}

<div id="wrapper">
<div id="left">

...menu
</div>
<div id="right">

</div>
</div>

Using repeat with a value of y, the image (wrapper) will expand or contract as content is added or removed. For an example, my class project for this semester:

http://mjf.missouristate.edu/students/med390/butlerrc/

The left and right column is a wrapper sliced out in FW.

[Barton68]

Dear Ryan,

thanks for the code, worked a treat. I added height: 100% to get it to work with my layout.

Thanks,
Barton.