Плавающее изображение перекрывает контейнер. Clearfix не работал

Question

Я буквально пробовал каждый хакер clearfix, который я мог найти в течение нескольких часов, и ничего не работает. Фотография брусчатки внизу справа всегда выходит за пределы контейнера содержимого. Это в настоящее время, что у меня есть:

.content { 
    margin: -10px auto 10px; 
    padding: 10px; 
    } 

#paving_photo { 
    float: right; 
    margin: 10px 0 10px 10px; 
    border: 2px solid black; 
    width: 300px; 
    height: 300px; 
} 

.content:after { 
content: ""; 
display: block; 
height: 0; 
clear: both; 
} 

Это страница: website template

Я попытался clearfix хак и микро хак. Я добавил clearfix в класс контента. Я попробовал переполнение: hidden | auto. Я попытался добавить clear: как после плавающего элемента. Буквально ничего не работало.

Я нахожусь в своем уме. Пожалуйста помоги! Спасибо!

Answer 1

Кажется, что на FF на моем конце отлично, за исключением того, что высота экрана меньше, чем около 791 пикселей. Я думаю, что это связано с .outercontainer Высота установлена ​​на height:100%.