Floating an Image in a way it slides out of the div - html

Question

I want to float an image in that way it slides out of the div. I have even added the negative margin for the image but what is happening is that the iPhone image is getting truncated all the time.
I have tried to include the height and width of the image as well but nothing is working.
Please help.
.blue-wrapper {
background: #41A7D3;
width: 100%;
overflow: hidden;
}
.blue {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.blue-left {
float: left;
width: 39%;
}
.blue-left img {
display: block;
margin-top: -100px;
width: 380px;
height: 739px;
}
.blue-right {
float: right;
width: 61%;
color: #FFFFFF;
}
<div class="blue-wrapper">
<div class="blue">
<div class="blue-left">
<img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone">
</div>
<!-- Blue Left -->
<div class="blue-right">
<div class="blue-text">
<h2>What ComeAgain Can Do for Your Business</h2>
<p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea. Ea utamur persecuti vis. Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas. Ut legere vocibus fierent nec, ei dicit
everti patrioque sed. Mel verear impetus et, fugit vocent ut nam.
</p>
<h3>How ComeAgain Works</h3>
<ul>
<li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li>
<li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li>
</ul>
</div>
<!-- Blue Text -->
<div class="blue-button">
Get Registered
</div>
<!-- Blue Button -->
</div>
<!-- Blue Right -->
</div>
<!-- Blue -->
</div>
<!-- Blue Wrapper -->

Answer 1

.blue-wrapper {
background: #41A7D3;
width: 100%;
}
.blue {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.blue-left {
float: left;
width: 39%;
position: relative;
}
.blue-left img {
display: block;
top: 100px;
width: 380px;
height: 739px;
position: absolute;
}
.blue-right {
float: right;
width: 61%;
color: #FFFFFF;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<div class="blue-wrapper clearfix">
<div class="blue">
<div class="blue-left">
<img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone">
</div><!-- Blue Left -->
<div class="blue-right">
<div class="blue-text">
<h2>What ComeAgain Can Do for Your Business</h2>
<p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea.
Ea utamur persecuti vis.
Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas.
Ut legere vocibus fierent nec, ei dicit everti patrioque sed. Mel verear impetus et, fugit vocent ut nam.
</p>
<h3>How ComeAgain Works</h3>
<ul>
<li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li>
<li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li>
</ul>
</div><!-- Blue Text -->
<div class="blue-button">
Get Registered
</div><!-- Blue Button -->
</div><!-- Blue Right -->
</div><!-- Blue -->
</div><!-- Blue Wrapper -->
For the background you should add a .clearfix on the wrapper.