title: How do I make a floating image float to the top right of a div?
body: <p>I have a bunch of divs that are generated dynamically.  When the text is long, it will wrap.  Which is fine, but the floating delete icon floats to the bottom.</p>
  
  <p>A few things to note before looking at the code.  The width in the example is static, but in my use it's defined by the container.  I would rather not use absolute positioning, but will as last resort.</p>
  
  <p>Here is an example of what I'm talking about (<a href="http://jsfiddle.net/3FYv8/1/" rel="nofollow">http://jsfiddle.net/3FYv8/1/</a>)</p>
  
  <pre><code>&lt;div class="deletableGroup"&gt;Marketing Department
      &lt;img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/&gt;
  &lt;/div&gt;
  &lt;div class="deletableGroup"&gt;Sales
      &lt;img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.deletableGroup img {
      padding-left: 5px;
      padding-top: 2px;
      cursor: pointer;
      float: right;
  }
  .deletableGroup {
      width: 125px;
      padding: 2px;
      border: solid 2px lightskyblue;
      background-color: #F5F5F5;
      border-radius: 5px;
      margin: 3px;
      display: inline-block;
  }
  </code></pre>