Попытка выравнивать изображение вправо. Div отрывается

Question

Когда я добавляю .article img {float: right; } изображение выходит из статьи div, и я не получаю желаемый результат, который я хочу. Я хочу выровнять изображение в сером прямоугольнике и вправо. Вот что я достиг.

Что я получаю, изображение выровнено за пределами основного контейнера.

{ 
 
    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"> 
 
\t <div class="main-container"> 
 
\t \t <div class="articles"> 
 
\t \t \t <h3>Heading of the article</h3> 
 
\t \t \t <br/> 
 
\t \t \t <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> 
 
\t \t \t <img src="http://placekitten.com/g/300/300"></img> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

Это может быть легко решен путем добавления четкого элемента в конце:

<div class="clear"></div> 

CSS-код:

.clear { 
    clear: both; 
} 

пример:

.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>