Div寬度不會調整為位於浮動圖片旁邊

Question

我很難獲得包含文本的div以減小其寬度，以便很好地環繞在向右浮動的圖像旁邊。 div內的文本表現如我所願，但是灰色div延伸到圖像后面。

div / box是wordpress shortcode插件的一部分。 我不知道這是否使事情復雜化

這是有問題的元素的CSS

---

圖片：

.circular-image-right img {
    border-radius: 50%;
    clear: both;
    display: inline;
    float: right;
    height: 300px;
    margin: 0 30px 60px;
    width: 300px;
}

---

分區：

element.style {
    text-align: left;
    width: 100%;
}

 .symple-box.gray {
    background: none repeat scroll 0 0 #F9F9F9;
    border: 1px solid #DDDDDD;
    color: #666666;
}

.symple-box {
    -moz-box-sizing: border-box;
    border-radius: 2px;
    display: block;
    font-size: 1em;
    margin: 10px 0;
    padding: 30px 15px 5px;
}

---

有問題的頁面可以在這里看到：

http://c3927181.myzen.co.uk/

Answer 1

http://jsbin.com/iLAMuXoc/5/edit?css，輸出

.symple-box.gray { 
  padding: 16px 30px; 
  margin: 0 360px 0 0;
  background: none repeat scroll 0 0 #F9F9F9; 
  border: 1px solid #DDDDDD; 
  color: #666666;
}