Newbie CSS Question - Vertically Expanding Columns

[ac6789]

I've just started to learn CSS and this is probably a stupidly simple question but for the life of me I can't figure out how to do this.

I have a two column website, one column is the navigation the other is content. The nav and content are in a "wrapper" div with the content floated to the right.

The navigation has a green background colour and I want the green to expand downward as the content grows. Right now if content goes past the bottom of the navigation, the green stops under the last link.

I don't have the code with me right now. But as an example of the effect: Imagine a two column table. As the content column expands down, so does the nav column auto-filling with a green background.

Since the content expands the wrapper div, I thought, height: 100% would work, but that didn't do anything.

Any help would be appreciated.

Thanks!

 

[ChicoWeb]

I would put a bg image on your wrapper that has green on the left row, and whatever color for the right row. Common practice.

 

[kgarner]

Try this: http://www.alistapart.com/articles/fauxcolumns/

 

[ac6789]

Try this: http://www.alistapart.com/articles/fauxcolumns/

Thanks for the link! I'm going to try that when I get home.

Thanks again!

 

[Stampyhead]

I would put a bg image on your wrapper that has green on the left row, and whatever color for the right row. Common practice.

Yep, that's how I usually do it too.

 

[ChicoWeb]

Yep, that's how I usually do it too.

Yup, no need to overly complicate things 🙂

 

[Wee Beastie]

This doesn't seem like it would work with an elastic layout...unless I am missing something. If I am would someone let me know?

I was playing around with this technique last night, but was having some trouble getting everything to display correctly: http://www.alistapart.com/articles/multicolumnlayouts

Does this work well for any of you? If not do you have another suggestion?
Thanks!