As someone who alternates right and left floats a lot, I have a pretty good idea what your problem may be, and it's not covered in the tutorial.
Unless you consistently have enough text to surround the floated item, the floats will start floating around each other, which is what causes the effects you describe.
The solution is simple. When you are finished with the text for a float, you should end it with this tag.
[clearboth]
That will allow the next float (be it right or left) to start fresh, right after the bottom of the text or the bottom of the picture, whichever is lower, rather than within the previous float.