Float two divs on the right, one on top of each other - html

Question

All
this is my first stack overflow post, thanks in advance for any help
I am putting together a page with content and divs with image background, when I try to float two divs on the right one on top of each other, having trouble flow content to the left, I have used clear so one div is on top of the other one on the right, but the content I am trying to put on the left is align with the second image where the clear was applied then there is a big gap for the first div, any suggestions?
I have enclosed code here
.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}
.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}
HTML
<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>

Answer 1

Try this, I believe it's what you asked for:
HTML:
<div style="float: left;">
<div>Content.........</div>
</div>
<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>
CSS:
.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}
.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}
JsFiddle: https://jsfiddle.net/nmzwLn2q/1/