title: How can I wrap text around a bottom-right div?
body: <p>Every time I try to do something seemingly-simple in CSS, it doesn't work.</p>
  
  <p>I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.</p>
  
  <pre><code>&lt;div id="contents"&gt;
      &lt;img src="..." /&gt;
      text text text text text text ...
  &lt;/div&gt;
  </code></pre>
  
  <p>So I want it to look like:</p>
  
  <pre><code>------------------
  | text text text |
  | text text text |
  | text text -----|
  | text text |    |
  ------------------
  </code></pre>
  
  <p>Doing it with a top-left or top-right image is cake:</p>
  
  <pre><code>#contents img { float:right; }
  
  ------------------
  | text text |    |
  | text text -----|
  | text text text |
  | text text text |
  ------------------
  </code></pre>
  
  <p>Now how do I push that to the bottom?
  The best I've come up with so far are:</p>
  
  <pre><code>#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px
  
  ------------------
  | text text      |
  | text text      |
  | text text -----|
  | text text |    |
  ------------------
  </code></pre>
  
  <p>In this case the text does not print in the margin, so there is white space above the image.</p>
  
  <pre><code>#contents { position:relative; }
  #contents img { position:absolute; right:0; bottom:0; }
  
  -or-
  
  // move the img tag under the text in the html and:
  #contents img { float:right; margin-top:-160; }
  
  ------------------
  | text text text |
  | text text text |
  | text text -----|
  | text text | te |
  ------------------
  </code></pre>
  
  <p>In this case the text prints over or under the image.</p>
  
  <p>So... how can I accomplish this?</p>