Floating divs not aligning correctly in IE9

I am experiencing issues with floating divs in IE9. The second div (after having added borders) seems like it is split into two, though it is one div with a header tag and an unordered list. The header tag displays correctly, while the list is pushed below the first div and the other divs then float next to the list. If I removed the div containing the list, the same thing happens with the next div; header displays correct, but the images are pushed below the first div. Have a look at the site: http://www.greenhomesofmaine.com/ scroll down to the footer. IE9 is the only browser causing this mal-alignment of divs.

CSS:

#footertopbg {
display: block;
background: #333333;
width: 980px;
margin: 10px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 5px solid #222222;
}

#footertop {
float: left;
display: block;
line-height: 16px;
background: #333333;
width: 980px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#footertop h4 {
color: #FFFFFF;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -0.2px;
margin: 0px 0px 10px 0px;
padding: 20px 0px 5px 0px;
text-decoration: none;
border-bottom: none;
}

#footertop li {
text-decoration: none;
list-style-type: none;
}

#footertop li a, #footertop li a:link, #footertop li a:visited {
color: #CCCCCC;
font-weight: normal;
text-decoration: none;
}

#footertop ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 10px 0px;
}

#footertop ul ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#footertop ul li {
list-style-type: none;
margin: 0px 0px 8px 0px;
padding: 0px;
}

#footertop ul li {
display: inline;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#footertop ul li a {
background: none;
display: block;
padding: 5px 7px 3px 7px;
margin: 0px 0px 8px 0px;
border-left: 5px solid #333333;
}

#footertop ul li a:hover {
background: none;
color: #FFFFFF;
display: block;
padding: 5px 7px 3px 7px;
border-left: 5px solid #0099CC;
}

#footertop .textwidget {
color: #CCCCCC;
line-height: 18px;
}

.footertopleft {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 15px;
padding: 0px 0px 0px 0px;
}

.footertopmidleft {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}

.footertopmid {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}

.footertopmidright {
width: 170px;
float: left;
display:开发者_如何学Python inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}

.footertopright {
width: 170px;
float: right;
display: inline;
margin: 0px 15px 0px 10px;
padding: 0px 0px 0px 0px;
}

I have never encountered an issue like this and any help would be appreciated.

Try using IE9 in compatibility mode. For whatever reason there is that option and many times that's the only way to fix stupid issues that are only pertinent to IE9.