How can I override an external CSS file for I.E.7 to force the footer to stay at the bottom of the page?

Question

IE 7 does not keep the footer at the bottom of some pages of my www.heart-health-info.com site. It works ok in I.E.6 and Firefox 2. The left column is usually shorter than the right, and the footer starts right below the left column and is not clearing the right column, but overlaying it. I have tried floating with the right column, but the footer starts at the right column (which is wrong) and extends past the right column (which is also wrong). The footer needs to go across the entire bottom of the page.
Here's the code that controls the footer position in layout.css
/**********************************************************
#footer: The page footer - will stick to the bottom if not
enough content.
**********************************************************/
#footer {
float: left;
width: 100%;
clear: both;

margin-top: -3.8em;
background: #000 url(../images/bg/footer.jpg) repeat-x top left;
}

Any help would be much appreciated. Thanks.

Answer 1

Curious you should ask. I had the same problem just last week!

I had my other columns (three of them, above the footer) set up, floating left, percentages) to occupy 100% of the screen. What I discovered is, remove the "float: left;" from the footer definition and your problem may well disappear!

Answer 2

No, the order of ruling is: a million. CSS markup /w style tags 2. CSS markup /w style tags (under #a million) 3. type tags subsequently type tags are absolute (and are not seen the staggering thank you to type a internet site.