I would like to help, but I’m not sure what you mean when you say “I want the bottom of the red flush with the bottom of the html”
Do you mean that you want the red to start at the bottom of the main content column or do you want the three columns at the bottom to be displayed in the yellow section below the gradient in the middle column? Do you have a picture of how you want it to look?
You should dl the Firebug extension for Firefox. It allows you to highlight elements by hovering over them, and you can select elements and tinker with the css that is applied on that element to immediately see the changes.
