I'm attempting the following layout:

------------------ Lorem ipsum dolar lorem ipsum dolar
- Image 1 - lorem ipsum dolar lorem ipsum dolar
- - lorem ipsum dolar lorem ipsum dolar
------------------ lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar --------------------
lorem ipsum dolar lorem ipsum dolar - Image 2 -
lorem ipsum dolar lorem ipsum dolar - -
lorem ipsum dolar lorem ipsum dolar --------------------

Image 1 is floated to the left. Image 2 is floated to the right. Image 2's top edge should be below Image 1's bottom edge. Text should wrap around both images.

I cannot get Image 2 to drop below Image 1. Here was my last attempt.

<div class="pic-left"><img class="pic-border" src="Image 1" />
  <div class="attribution"><a href="/attr/1">Image 1</a></div>
</div>
<div class="pic-right"><img class="pic-border" src="Image 2" />
   <div class="attribution"><a href="/attr/2">Image 2</a></div>
</div>
Lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar ...

  .pic-right
  {
    float: right;
    clear: left;
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .pic-left
  {
    float: left;
    clear: right;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .pic-border
  {
    border: 2px solid rgb(0, 0, 0);
  }

  .attribution
  {
    margin-top: 0px;
    font-size: 8px;
  }

Any suggestions?

A link to the page is needed ideally

However put your right floated element before the left float in the document flow.

That did it. Cheers.