[Solved] Float problem in IE (apparently not related to width?)

Hey everyone,

I've run into a problem with floating divs not displaying correctly in IE. I know, I know, you get this all the time. The floating element (#left-image) is appearing correctly, but the element that appears beside it (#main-txt) is not...at least in IE. It is being shoved underneath the floated element instead of appearing to the right of it. In all browsers, it's working correctly.

I am not having any issues with my other floated element (#right-image) or the element that it is floating to the right of (#nav).

I've been researching for hours, and I keep seeing that the answer is to decrease the width of the div that is beside the floated div, but I've done this to no avail. The other answer I've found is to change all margins to 0, but I already have that covered.

Any other suggestions? If it helps, you can check out my working demo at http://www.todayshomemaker.com/mmlc.

Here is the HTML:

MorningStar Music Learning Center

And here is the CSS:
/* CSS Document */

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100% georgia, verdana, arial, sans-serif;
}

h4, h5, h6, pre,
blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}

h1, h2, h3 p {
margin: 1em, 0;
line-height: 1.1em;
}

li, dd, blockquote {
margin-left: 1em;
}

li {
padding-bottom: 5px;
}

form label {
cursor: pointer;
}
fieldset {
border: none;
}

input, select, textarea {
font-size: 100%;
}

h1 {
padding-bottom: .5em;
line-height: 1.2em;
}

#container {
width: 800px;
border: black solid thin;
background-color: white;
background-image: url(images/main-bg.gif);
background-repeat: no-repeat;
margin: 10px auto;
}

#logo {
width: 572px;
height: 93px;
margin: 10px auto;
background-image: url(images/logo-web.gif);
background-repeat: no-repeat;
padding: 5px;
}

#logo a .hotspot {
width: 572px;
height: 93px;
position: absolute;
}

#body-contain {
border: black solid thin;
width: 745px;
background-image: url(images/contentfill.gif);
margin: auto;
}

#nav {
padding-top: 7px;
padding-bottom: 7px;
}

#nav li {
list-style-type: none;
display: inline;
font-size: 1.2em;
font-weight: bold;
color: #CCCCCC;
}

#nav a, #nav a:link, #nav a:visited {
text-decoration: none;
color: #666666;
}

#nav a:hover {
text-decoration: none;
color: #333333;
}

#right-image {
float: right;
background-image: url(images/violin-trans.gif);
background-repeat: none;
width: 183px;
height: 400px;
}

#left-image {
background-image: url(images/main-pics.jpg);
background-repeat: none;
width: 126px;
height: 281px;
float: left;
margin-top: 25px;
margin-left: 15px;
}

#main-txt {
width: 350px;
height: 345px;
padding-top: 20px;
padding-left: 175px;
font-size: .95em;
line-height: 1.2em;
}

#main-txt-longer {
width: 500px;
padding-top: 20px;
padding-left: 175px;
padding-bottom: 20px;
font-size: .95em;
line-height: 1.2em;
}

#copy {
font-size: .8em;
margin: 15px auto;
width: 800px;
text-align: center;
}

.hidden {
position: absolute;
left: -9999px;
}

.blank-list {
margin-top: 35px;
font-size: 1.15em;
line-height: 1.3em;
list-style-type: none;
}

legend {
display: none;
}

hr {
width: 50%;
}