title: Styling a single Twitter feed with avatar
body: <p>I'm having a slight issue styling a Twitter feed that I'm pulling through to my page.</p>
  
  <p>I can't seem to get the image to sit on the left with a right margin of 15px and then the text will float right of the image. Currently it's overlapping on the image, but I can actually target the text to separate it, as the code is being generated by JS. Any ideas?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="twitter"&gt;
    &lt;h2 class="twitter-header"&gt;Twitter&lt;/h2&gt;
    &lt;div id="tweet" &gt;&lt;/div&gt;
    &lt;img class="followme" src="images/follow-me.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#gezzamondo .sidebar #twitter #tweet{
    color:#099!important;
  }
  
  #gezzamondo .sidebar #twitter .twitter-header{
    background-image:url(../images/twitter.png);
    background-repeat:no-repeat;
    padding-left:20px;
  }
  
  #gezzamondo .sidebar #twitter #tweet ul li img{
    float:left;
    margin-top:-25px;
  }
  
  #gezzamondo .sidebar #twitter #tweet ul li {
  }
  
  .followme{
    margin-top:15px;
    float:right;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>&lt;!-- Twitter feed --&gt;
  &lt;script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    getTwitters('tweet', {
      id: 'gezzamondo',
      count: 1,
      enableLinks: true,
      ignoreReplies: true,
      clearContents: true,
      &lt;!--template: '"%text%" &lt;a href="http://twitter.com/%user_screen_name%/statuses/%id%/"&gt;%time%&lt;/a&gt;' --&gt;
      template: '"%text%" &lt;img src="%user_profile_image_url%" height="" width="" /&gt;&lt;a href="http://twitter.com/%user_screen_name%/statuses/%id%/"&gt;%time%&lt;/a&gt;'
    });
  &lt;/script&gt;
  </code></pre>