浮動右不起作用

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; 
}