Clear Float in FireFox problem works in IE

Hello, I have a problem , I have a 2 column site design with a header and footer navigation...
http://www.skatemack.com/html/parknews/parknews.html

the bottom navigation bar, is showing in the main element, when the text in the main div exceeds the length, rather than pushing the footer element down as it should, it is behind it... I've been searching and recoding, but I can't figure out a working solution...

here is the main css file of the site:

http://www.skatemack.com/css/sitestyle.css

Any suggestions, input or help would be greatly appriciated

- macneilslt

 

I believe the following will work for you with fewer gotchas. When you set a height, modern, compliant browsers honor the value. IE is neither modern nor compliant. Since #main has a dimension set, it has a thing IE calls layout, which means IE ignores the height you set if content overflows, and it expands the container. Modern browsers simply allow the extra content to overflow, as it should.

body {}

#wrap {
    margin:0 auto;
    width:664px;
    }

#sidebar {
    margin-top: 20px;
    text-align: left;
    float:left;
    width: 100px;
    border-right: 1px solid silver;	
    }

#main {
    border-left: 1px solid silver;
    margin-top: 20px;
    margin-left: 100px;
    text-align: left;
    }
	
#footer {   
    clear:both;
    }

Code (markup):

cheers,

gary

 

Thank you very much, that did the trick. I never would have thought that would have anything to do with it. I guess its time for me to brush up on css