Hello! Sorry for the, um, colourful title.

In my test webpage, the sidebar (with border) is shorter than the main content. When the main content is longer than the sidebar, the border stops where the sidebar ends, thus leaving an ugly white space before the footer.

Of course, I have images to help me explain. This is a screenshot with the problem...
http://i9.photobucket.com/albums/a77/mizz_qizz/scrnshot1.gif
Notice the sidebar's right border ends before it reaches the footer, because of the main content being longer than the sidebar.

Here is how I want it, without the problem...
http://i9.photobucket.com/albums/a77/mizz_qizz/scrnshot2.gif
It looks okay because the main content is shorter than the sidebar.

I have tried using height:100%; for the sidebar, it doesn't work though.

It'd be awesome if someone helps solve this problem... Thanks.

Love the title! ;)

This article might be useful to you. (http://alistapart.com/articles/fauxcolumns/)

Other than that, I'm not sure how to achieve the effect you're after.

Sorry I couldn't be more helpful.

Thank you for the article :)

Anybody else able to help?

No worries. =)
Here's another method. (http://builder.com.com/5100-6371_14-5268973.html)

Wow, that article is really useful! It just solved my problem. Thanks so much angelic deception, you're really helpful :)

Ooh, yay! I'm glad it helped you out. =)