CMS Made Simple Forums

Posted: **Wed Sep 12, 2007 9:54 pm**

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

Posted: **Wed Sep 12, 2007 11:45 pm**

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

Posted: **Thu Sep 13, 2007 9:35 am**

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!

Posted: **Thu Sep 13, 2007 10:30 am**

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

CMS Made Simple Forums

3 column layout - background image all the way down?

3 column layout - background image all the way down?

Re: 3 column layout - background image all the way down?

Re: 3 column layout - background image all the way down?

Re: 3 column layout - background image all the way down?