Я не могу выровнять изображение по левому краю, а затем выровнять текст по правому краю изображения внутри тега нижнего колонтитула

   <style>
    .mainfooter {
        clear:both; 
        height:auto;
        width: 100%;
        text-align:center; 
        background-color: #ff80ff; 
        border:3px solid purple; 
        border-bottom-left-radius:10px;
        -moz-border-bottom-left-radius:10px;
        -webkit-border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        -moz-border-bottom-right-radius:10px;
        -webkit-border-bottom-right-radius:10px;
        height:80px;

}
    </style>

    <footer class="mainfooter">
    <!-- begin problem area -->
<div style="clear:both; float:left; position:relative; overflow:hidden; width:91px; height:52px;">
    <img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif" style="float:left; width:auto; height:auto;" alt="Join one of our groups!">
</div>
<div style="float:left;width:150px; text-align:left; vertical-align:middle;">
    <b><a href="http://groups.yahoo.com/group/jpfun/join">JPFun Group</a><br />
    <a href="http://groups.yahoo.com/group/jpffreepatterns/join">JPFun Newsletter</a></b>
</div>
    <!-- end problem area,  I intend to put all of the styles into my css file when I am happy with my footer. -->

<div style="float:right; width:200px; height: 100px">
    this is the Right hand side
</div>
<div style="float:left; width:auto; padding:0px;">
    other stuff will go here later in the middle
</div>
    </footer>