title: I cannot align an image to the left and then align text to the right of the image inside a footer tag
body: <pre><code>   &lt;style&gt;
      .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;
  
  }
      &lt;/style&gt;
  
      &lt;footer class="mainfooter"&gt;
      &lt;!-- begin problem area --&gt;
  &lt;div style="clear:both; float:left; position:relative; overflow:hidden; width:91px; height:52px;"&gt;
      &lt;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!"&gt;
  &lt;/div&gt;
  &lt;div style="float:left;width:150px; text-align:left; vertical-align:middle;"&gt;
      &lt;b&gt;&lt;a href="http://groups.yahoo.com/group/jpfun/join"&gt;JPFun Group&lt;/a&gt;&lt;br /&gt;
      &lt;a href="http://groups.yahoo.com/group/jpffreepatterns/join"&gt;JPFun Newsletter&lt;/a&gt;&lt;/b&gt;
  &lt;/div&gt;
      &lt;!-- end problem area,  I intend to put all of the styles into my css file when I am happy with my footer. --&gt;
  
  &lt;div style="float:right; width:200px; height: 100px"&gt;
      this is the Right hand side
  &lt;/div&gt;
  &lt;div style="float:left; width:auto; padding:0px;"&gt;
      other stuff will go here later in the middle
  &lt;/div&gt;
      &lt;/footer&gt;
  </code></pre>