100% Height for Left Column

I have a two-column layout where I want the left column to have a
colored background while the right column (main content div) has a
white background. Please see http://www4.scoe.net/rfox/nest/index4.html

My problem is that the colored background in the left column only
extends to the height of the content leaving a white gap below it. How
can I make the left nav's color stretch the entire height?

On a side note, in Internet Explorer and only Internet Explorer, the
photo in the gray message box disappears, but is fine in every other
browser. Any ideas on that wacky issue?

Thanks.

-Ray

rfox (AT) scoe (DOT) net wrote:

My problem is that the colored background in the left column only
extends to the height of the content leaving a white gap below it. How
can I make the left nav's color stretch the entire height?

The default skin for nucleus (http://www.nucleuscms.org)
solved that by having a div _outer_ to both columns, and
doing a vertical-only repeat of a gif of the same color
as background behind that column.

I'm not saying that's the best way, but that's what they did.
When I widened the column in the CSS, it took me quite a while
to figure out why (it seemed) that the blocks _in_ the column
widened but the column itself did not.

--
Wes Groleau

Beware of the man who works hard to learn something, learns
it, and finds himself no wiser than before ... He is full of
murderous resentment of people who are ignorant without having
come by their ignorance the hard way.
-- Kurt Vonnegut

rfox (AT) scoe (DOT) net wrote:

I have a two-column layout where I want the left column to have a
colored background while the right column (main content div) has a
white background. Please see http://www4.scoe.net/rfox/nest/index4.html

My problem is that the colored background in the left column only
extends to the height of the content leaving a white gap below it. How
can I make the left nav's color stretch the entire height?

On a side note, in Internet Explorer and only Internet Explorer, the
photo in the gray message box disappears, but is fine in every other
browser. Any ideas on that wacky issue?

Thanks.

-Ray

Suggest

Set the left margin on left column to 0

Add a left border rule to content class of the appropriate color, solid
and the width of the left column.

Louise

Thank you both for your suggestions. I tried 'em both out, but in this
instance, they created more problems. I can't believe there's not a
simple and effective way to achieve this. :/

I wound up adding a spacer image at the bottom of the left column and
adjusting the footer's z-index to float above it. Not elegant, but it
works.

Thanks again.

-Ray

For those that follow with the same issue, a simple method to achieve a
two column layout with both columns appearing equal in height can be
found at:
http://www.alistapart.com/articles/fauxcolumns

-Ray