To change the background colors and still retain the full height appearance that must me done on the #wrap div for bot columns.
Currently the left column gets it's color from this image
which is set as repeat-y on the wrap div.
min-height:100%; /*height is determined from parent's height (html & body)*/
margin:-100px auto 0;/*pull footer back into viewport with negative top margin*/
background:[B]#FFF[/B] url(images/[B]faux.jpg[/B]) repeat-y 0 0;
The main (right column) gets it's color from the #FFF shown above.
You will need to make a new image to change the color of the left column.
To get rid of the dotted red border just remove it from #content, I had made a note in the CSS that it was just to show that floats are being contained.
That is what I meant by "full height appearance" in my first post.