Поплавок две дивы справа, один поверх друг друга

Question

Все это мой первый переполнение стека пост, спасибо заранее за любую помощь

Я собираю страницу с контентом и дивы с фоновым изображением, когда я пытаюсь сместить два div на правой стороне друг над другом, имея проблемы с потоком содержимого слева, я использовал clear, чтобы один div находился поверх другого справа, но контент, который я пытаюсь положить слева выравнивается со вторым изображением, где был применен ясность, тогда есть большой пробел для первого div, любые предложения?

Я прилагаю здесь код

.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

Попробуйте это, я считаю, что это то, что вы просили:

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/