css image spacing right

Question

I am trying to create a 'polaroid' image effect off to the right, but can't figure out how to do two things.

1. I want some whitespace "around" the drop shadow/polaroid image I've created, and text flow around it.
2. I want to make them one on top of another. I.e., first image, then second image after (so it looks like one picture is sitting on top of another, but only partially).

Any clue how to do that?

Images should appear on the "right" side - but with a margin of say 50px (whitespace). (I.e., I want a bunch of text I type in - and the images to appear at the 'top' of the page, but to the far right, stacked on one another, with say 50px of whitespace so the text doesn't "touch" the rotated image.

HTML

<div style="border:10px;border-style:solid">
    <div class="polaroid rotate_right" style="float:right;z-index:100;">
        <img src="sampleimage001" alt="">
        <center>Picture 001</center>
    </div>
    <div class="polaroid rotate_left" style="float:right;">
        <img src="sampleimage002" alt="">
        <center>Picture 002</center>
    </div>
</div>

Here's the CSS I am currently using.

div.polaroid {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
    float: left;
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari */
    transform: rotate(7deg);
}

div.rotate_left {
    float: left;
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Safari */
    transform: rotate(-8deg);
}

Answer 1

I cleaned up some of your inline styles and CSS. The polaroid container now uses absolute positioning to align right allowing your photos to stack in the way you described. Can you explain what you mean by 50px whitespace needed around text?

Here's a Codepen example: http://codepen.io/stevenng/pen/GZbeXe

HTML:

  <div class="pic-container">
    <div class="polaroid rotate_right">
        <img src="http://lorempixel.com/200/200" alt="">
        <center>Picture 001, bunch of text</center>
    </div>
    <div class="polaroid rotate_left">
        <img src="http://lorempixel.com/200/200" alt="">
        <center>Picture 002</center>
    </div> </div>

CSS:

div.polaroid {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
    float: left;
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari */
    transform: rotate(7deg);
}

div.rotate_left {
    float: left;
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Safari */
    transform: rotate(-8deg);
}

.pic-container {
  position: absolute;
  right: 0;
  max-width: 200px;
}