CSS Alignment Issues

The page template views fine in firefox:



But the same file in IE:



Now let's put some copy in, firefox, fine:



But uh oh, IE bad:



The CSS goes basically like this:



/* mainContent */

#mainContent {
background-color: #2E3D7A;
width: 770px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-bottom: 1px;
background-image: url(../graphics/bgd_content.gif);
background-repeat: repeat-y;
background-position: center;
}

/* infoBar */

#mainContent #infoBar {
background-color: #E6E6E6;
width: 740px;
height: 30px;
margin-top: 10px;
margin-right: 10px;
margin-left: 15px;
margin-bottom: 0px;
float: left;
}


/* leftCol */

#mainContent #leftCol {
float: left;
width: 180px;
margin-left: 15px;
background-color: #FFFFFF;
margin-bottom: 10px;
margin-top: 10px;
overflow: visible;
padding-top: 0px;
}


/* mainCol */

#mainContent #mainCol {
background-color: #FFFFFF;
float: right;
width: 335px;
margin-right: 10px;
margin-bottom: 10px;
}


/* pod */

#mainContent #pod {
background-color: #E2E5F1;
float: right;
width: 200px;
margin-right: 15px;
margin-bottom: 10px;
}

#mainContent #breadcrumbs {
background-color: #F8F8F8;
float: right;
width: 545px;
margin-right: 15px;
margin-bottom: 10px;
margin-top: 10px;
height: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color:#999999;
}

#mainContent #leftNav {
float: left;
width: 180px;
margin-left: 15px;
background-color: #FFFFFF;
margin-bottom: 10px;
overflow: visible;
padding-top: 0px;
}