rocknbil - 4:11 pm on Jun 14, 2012 (gmt 0)
A little more info as to why it's doing that: as mentioned, absolute positioning takes an element out of the document's natural flow, while relative positioning positions it relative to it's parent container. Since that parent is a paragraph, the paragraph stays where it is and the picture is positioned relative to the paragraph's "natural" position.
As posted, with nothing else on the page, the paragraph is the full width of the page so there's a 415 pixel space to the right inside the paragraph. There's your gap.
One of your best tools for figuring this stuff out will be to work in FireFox (anything but IE) and install the FireBug extension, which allows you to right click an area of a page and select "inspect element" which will highlight elements and their margins and paddings. You can clearly see the gap in the <p> using FireBug.
One way to do what it looks like you're doing is to assign the class to the paragraph which would move the whole chunk, but as mentioned, it's probably a troublesome approach. Assigning float: right to the paragraph might be more useful:
<p class="pic-container"><img src=".....
Floats have their own quirks you'll need to deal with, but answers to all of them are on this message board.
I like to always try to let the document render in it's most natural flow, modifying it only as necessary. This makes your job easier and un-bloats a lot of HTML code and CSS.