Trying to align my image to right. Div breaks away - html

Question

When I add .article img { float:right; } the image goes out of the div article and i am not getting the desired result I want. I want to align the image within grey box and to the right.
Here it is what I achieve.
What I am getting is the image is aligned outside the main container.
{
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="http://placekitten.com/g/300/300"></img>
</div>
</div>
</div>

Answer 1

This can be easily solved by adding a clear element at the end:
<div class="clear"></div>
the css:
.clear {
clear: both;
}
example:
.clear {
clear: both;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="http://placekitten.com/g/300/300">
<div class="clear"></div>
</div>
</div>
</div>