Faux columns for equal columns

How to use with a centred two-column layout

[mooperlee]

Hi - I am currently designing my first ever site using a CSS layout and not tables, so forgive me if I say anything moronic. I'm just an amateur.

The site is a simple two-column layout, with the main text in the right-hand column. I need a fix to make the left-hand column stretch to be equal with whatever size the right-hand column is.

I found a javascript fix online which works fine, but is not ideal because obviously some people disable javascript. I also found the faux column idea. However, my site is centred automatically (it's all in a container which is styled margin: 0 auto) and so I can't figure out how to position the faux column.

For example, if my left-hand column was fixed 20% away from the screen edge, this would be the code:

background: #ccc url(/images/faux.gif) repeat-y 20% 0;

But is it possible to do it for an automatically centred layout? What do you type instead of 20%? Very grateful for any ideas and help.

[Robin_reala]

Presumably you’d be setting the background on your centred container, in which case your example works. If you have a centred container with a left hand column of 20% and a right hand column of 80% then you’d simply set your faux column image to background-position: 20% 0; like you’ve got.

[mooperlee]

Thanks so much Robin - I had been setting the background of the whole body area, not just the container. Don't know why I didn't think of this, guess that's why I'm still an amateur!

I have changed it now and it works, hurrah. Really appreciate your help.