CSS Multiple Divs set to 100% Height

Question

I understand this question is redundant but I was unable to locate an answer from my searches on here and other online forums. Here is my situation.

http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html

On that page I have a 'separator' line that is to extend to the bottom of the page. Now, I have thrown in plenty of break tags to stretch the page. This shows that the background image (used as a footer images in a way) stretches to the bottom of the page fine. (That image is contained within div#content.

My question is how can I additionally get my div#rightContent to stretch just the same way?

I have my html, body and container heights all specific at 100% as well as another container div called #content. I am pretty stumped.

At the link you can view my source and hopefully point me in a good direction to achieve this. Any help would be greatly appreciated. Thanks.

Answer 1

Make one background image that contains both the outer borders and the right-column divider. This technique is called "faux columns".

See: http://www.alistapart.com/articles/fauxcolumns/ and http://en.wikipedia.org/wiki/Faux_columns

Answer 2

There are various CSS hacks to get equal column heights. The only one (IMHO) that feels 'standard' is to use display: table, but that doesn't work in IE (of course) so makes it less ideal.

As such, I find the solution that works best is a bit of JavaScript. You are already using jQuery so that'll make it even easier. Here's one example solution:

http://www.cssnewbie.com/equal-height-columns-with-jquery/