Using embedded style sheet to modify inline images

I'm having a bit of trouble trying to create an irregular line wrap around an image. Basically I'm given 6 'slices' of an image that I'm to put together to give the illusion it's one image; with text neatly wrapping to the left of it.

I was instructed to do this with an embedded style sheet. What I did was wrap each 'slice' within a div (so I may set each slice's width) and then wrap all those divs into a div with an id "images".

Now, inside, at the bottom of my head I have the following code:

<style type="text/css">
    #images {
        float: right;
        clear: right;
        margin: 0em 0em 0em 2em
    }
</style>

Now, the image is put together, as in, no gaps in-between, but all of the images aren't floating properly to the right. In fact, it looks as though the slices are kind of left-aligned. If they were right aligned it would look proper.

Also, the book asks to apply a style to "inline images". This is easy to do with paragraphs, headings, and addresses, but how would I apply a style to inline images other than using a ton of divs like I just did?

As requested here's the code for the div of images:

   <div id="images">
      <div style="width:6.7em"><img src="king1.gif" alt=""></div>
      <div style="width:7.85em"><img src="king2.gif" alt=""></div>
      <div style="width:11.45em"><img src="king3.gif" alt=""></div>
      <div style="width:14.25em开发者_如何学JAVA"><img src="king4.gif" alt=""></div>
      <div style="width:15.5em"><img src="king5.gif" alt=""></div>
      <div style="width:16.6em"><img src="king6.gif" alt=""></div>
   </div>

Also, I tried the following to no avail:

img {
    float: right;
    clear: right;
    margin: 0 0 0 2em;
}

Why an extra div around the images? Just use that exact style on every image, see http://jsfiddle.net/NGLN/B33kA/.

img {
    float: right;
    clear: right;
    margin: 0 0 0 2em;
}