Move Image In Staff Widget?

Hello, currently this is the staff widget on my site:



As you can see, the images aren't lining up neatly in rows. I was hoping someone could help me figure out how to edit the code so the pictures were lined up next to each other instead of floating in the middle/right on top of one another? (They are supposed to be separated by the Mods title).

Code:

<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList {text-align: center;}
#staffList a img {
  float: left; border-radius: 10px; width: 45px; height: 45px;}
}</style>               
<!--                          the staff list                          -->       
<div id="staffList">
                                                                                    
   <div id="mainBlock">
                                                  <img src="http://www.koiora.net/wp-content/uploads/2009/08/NedFlanders3-150x150.gif" id="mainImage" />                                         
   </div>
                                                      
   <div align="center">
                                  <img alt="http://www.koiora.net/wp-content/uploads/2009/08/NedFlanders3-150x150.gif" src="http://i.imgur.com/PjksWfj.png" />                         
   </div>
                                             <a href="/u1">    <img alt="http://oomlaut.com/wp-content/uploads/2013/04/Lisa_on_sax-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons007.jpg" />  </a>  <br />  <a href="/u2">    </a><a href="/u2"> <img alt="http://rogercatlin.com/wp-content/uploads/2011/07/Bart-Simpson-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons002.jpg" />  </a>                     
   <div align="center">
                            <img alt="http://www.koiora.net/wp-content/uploads/2009/08/NedFlanders3-150x150.gif" src="http://i.imgur.com/6f4bVJe.png" />                     
   </div><a href="/u2"> <img alt="http://rogercatlin.com/wp-content/uploads/2011/07/Bart-Simpson-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons002.jpg" />  </a><a href="/u1">    <img alt="http://oomlaut.com/wp-content/uploads/2013/04/Lisa_on_sax-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons007.jpg" />  </a>  <br />  <a href="/u2"></a>
</div><a href="/u2">                                                   
   <!--                        technical stuff                        -->            <script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script></a>]