float right не работает

Question

Извините за этот действительно основной вопрос. Я новичок в Css и пытаюсь заставить это работать. У меня есть следующий код:

<div class="box-title"><p>Element-Betonbecken Premium</p></div> 
     <img src="img/page1/pool-top.png" class="pool-img" alt="" /> 
     <div class="box-small-title-right"><p>Elementtreppen</p></div> 
     <div class="box-elementtreppen"></div> 

И у меня есть этот Css для разметки:

.box-title { 
    background-color: rgba(255, 255, 255, 0.5); 
    width: 900px !important; 
    height: 67px; 
    margin-top: 20px; 
    font-weight: 600; 
    line-height: 67px; 

} 

.box-title p { 
    font-weight: 600; 
    line-height: 67px; 
    padding-left: 20px; 
} 
.box-small-title-right { 
    background-color: rgba(255, 255, 255, 0.5); 
    width: 460px; 
    height: 40px; 
    float: right; 
    margin-top: 2px; 
} 
.box-small-title-right p { 
    font-weight: 600; 
    line-height: 40px; 
    padding-left: 20px; 
} 
.box-small-title-left { 
    opacity: 0.5; 
    background: #ffffff; 
    width: 420px; 
    height: 40px; 
} 


/** PAGE 1 **/ 

.pool-img { 
    width: 420px; 
    height: 220px; 
    margin-top: 2px; 
} 

.box-elementtreppen { 
    opacity: 0.5; 
    background: #ffffff; 
    width: 460px; 
    height: 304px; 
    float: right; 
} 

Моя цель состоит в том, чтобы получить этот результат:

Я знаю, что есть что-то вроде позиционирования, но, похоже, я не сделал это правильно.

Answer 1

добавить поплавок: слева это изображение

<img src="img/page1/pool-top.png" class="pool-img" alt="" /> 

.pool-img { 
     float:left; 
} 

так это оставляет пространство для следующего DIV

Надежда помощь

Answer 2

Вы должны дать

.pool-img { 
    float: left; 
}