With the text being too far away from the image. This may sound a bit complicated (my solution I mean) but it's the best way, trust me :). Now, you have the text stuff floated right, which means that it'll go as far right as possible. That's basically why.
Here's what you do, your <p> that's floated right (also you have some invalid code there on that <p>. If you even glance at the HTML you'll see it. It's like ""margin-left:100px";="""), switch that <p> with the div that holds the image in the HTML. Right now your source order is...
Switch that up. Now, float that <div> which holds the image. Float that left. So now both the image div and the <p> should be floated left.
Now, after that <p> in the HTML, you need to either do one of two things.
1) Place a clearing div after it (dunno why you'd do this but it's an option)
Aka. <div style="clear:both;height:0;font-size:0;"></div>
2) The following <p> of text, make that clear:both; (have it act as the clearing div)
I tested this and it worked, so make sure you do everything correctly and it should be fine there :)..