CSS positioning problem with IE

[Audiotech]

I'm having some serious issues getting a division and the contents thereof positioned properly on a site I'm working on.  In Firefox and Chrome everything looks great.  However, in IE all the content is mis-aligned and I can't seem to figure out what I'm doing wrong.

 

The location of the page is as follows:

http://valvetech.byethost14.com/media.html

 

as should be immediately apparent, in the media selection pane at the top right all the content blocks are different sizes and in different positions.  I don't know if the problem is how I'm going about laying out the html or in the css itself, though I suspect the latter.  I'l leave the html for viewing in the browser due to its size, but the css in question is titled playlist and is displayed below

#player {
float:none;
}	

#div1 {
background: #fff;
border: 7px solid silver;
margin:5px;
width: 400px;
height:300px;
float:left;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;		
}

#div2 {
background: #500;
border: 7px solid silver;
margin:5px 0px;
width: 310px;
height:300px;
color:black;
float:left;
overflow-x:hidden;
overflow-y:auto; /* dunno bout how this is functioning */	
-moz-border-radius: 7px;
-webkit-border-radius: 7px;		
}

#div3 {
margin:auto;
background: #500;
border: 7px solid silver;
width: 717px;
height:200px;
font-family: Verdana, Arial; 
font-size: 10pt; 
color: #fff;
text-align:left;
padding:5px;
line-height: 180%;	
overflow-y:auto;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;	
}

/* playlist style */
#clips {
width:auto;	/* set to auto? */
height:auto;
overflow-y:auto;
overflow-x:hidden;
/* padding: original 4 10 12 10 */
background-color:#fff;
margin-top:-1px;
margin-left:1px;	
float:left;
}

/* playlist entry */
#clips a {
display:block;
width:auto;
height:90px;
padding:5px;
background-color:#500;
border:1px solid #ccc;
font:11px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
margin-top:7px;
margin-left:1px;
margin-right:auto;
color:white;
}

#clips ul {
/* width:275px; this entry messes up the box */
margin-top:0px;
margin-left:-35px;
margin-right:5px;
color:#666;
list-style:none;
}

/* different states of a playlist entry */
#clips a:hover {
background-color:#345;
color:orange;
}

/* elements inside playlist entry */
#clips a img {
border:0;	
float:left;
margin-right:10px;
}

#clips a strong {
color:blue;		
padding-bottom:5px;
}

#clips a em {
border:0;	
float:left;
color:#333;
font-style:normal;
margin-top:10px;
}

.tabs h3 {
margin:3px;
color:#CCCCCC; 
font:normal Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-family:serif;
font-size:1.5em;
}

 

I'm about to go off my nut trying to figure this out and any help would be appreciated beyond words!

 

-Carl