3 column layout - background image all the way down?

[toolman]

Hi there,

I now have a left and right hand column.

However, i have a background image whihc I wish to use to fill the entire left and right columns. At the moment, the background image only covers where the content is on the left and right.. I want it to go right the way down to meet the main middle content.

Do you have any ideas how I can do this?
This is the code I am using:

Code: Select all

div#leftsidebar {
   float: left;
   width: 230px;
   margin-left: 0px;
   margin-right: 0px;
   background-image: url('images/leftbg.jpg');
   background-repeat: repeat-y;
   padding: 2px;
}

I have also attached an image of what I mean:
http://www.upload3r.com/serve/120907/1189634053.jpg

Any help would be very much appriciated

[michelG]

Hi Toolman,

I am guessing that you have a DIV for the left sidebar and one for the right sidebar.

You'll need to find a way to force both sidebars to the maximum height of the middle content. If you have no content in the DIV sidebar,  the background will not show-up. Because a 100% height value will not work corectly in a DIV -- at least not accross all browsers -- you may have to structure your page with a simple 3-column table construction instead of DIV elements.

Another option is to create a graphic image faking the rendering of your 3 columns (blue-white-blue). You can then use it as a page background (or as the content container background).

Michel

[toolman]

Hi there,

Yes, it has 3 DIV columns - a left, middle and right.

Is there no way I can make it stretch the whole height without tables as I want it to be pure CSS?

Many thanks!

[KO]

I would do michelG's background-image trick to have 3 coloums with equal height. That works in most browsers in XHTML in pure CSS - no tables.

Wrap your columns around one div and give it your background repeat-y.

Br, K