I tried removing some of the non-breaking spaces in the "news" div to keep it open so that it is at least as big as the main div. But when I removed one too many non-breaking spaces it causes the "nav" div to disappear unless you move your mouse over it. What can be causing this?

Is there a better way to fill the entire left floated column (from header to footer) with a background image or color, other than adding several non-breaking spaces to the div to keep it open so that it is as least as big as the main div?

http://www.diamondpackaging.com/green/diamond8c.htm
http://www.diamondpackaging.com/green/diamond8c.css

Give the news div a minimum height, but be aware that IE6 does NOT support min/max width or height.

Is there a better way to fill the entire left floated column (from header to footer) with a background image or color, other than adding several non-breaking spaces to the div to keep it open so that it is as least as big as the main div?

Yes, the method is called faux columns:
http://css-discuss.incutio.com/?page=AnyColumnLongest

Firebox renders the page fine.

I tried a couple things to correct the problem with IE and posted the results below.

*****

Update #1
I just noticed that this problem does NOT happen in if I use images in the nav bar. See example below:

http://www.diamondpackaging.com/green/diamond8aa.htm
http://www.diamondpackaging.com/green/diamond8aa.css


Update #2
Could this have something to do with the hasLayout property in IE? I added zoom:1 to the #nav div and the problem seemed to go away.

http://www.diamondpackaging.com/green/diamond8c.htm
http://www.diamondpackaging.com/green/diamond8c.css