Обтекать текст с полем вокруг изображения

Question

Есть ли способ обернуть текст в div с границей и маркой вокруг изображения с поплавком: правильно?
Пока что лучшее, что я смог сделать, это правильно обернуть текст вокруг изображения, но граница оказалась за изображением.

EDIT

Вот скриншот того, что я был в состоянии получить его слишком похожи: http://www.tiikoni.com/tis/view/?id=6753a19

Как вы можете видеть, граница заканчивается за изображение, когда я пытаюсь чтобы заставить его остановиться, когда он достиг границы изображения.

Код для этого:

<img src='images/mangos.jpeg' width='500px' style='float: right; border: 2px solid $theme; padding: 5px; margin: 0 5px 5px 5px;'> 
<div style='font-size: 19px; white-space: pre-wrap; border: 2px solid #F6B616; padding: 5px; margin: 5px;'> 
Text Here 
</div> 

EDIT 2

К сожалению, вопрос не очень понятно. То, что я получил, было фактически небольшим разрывом между границей текста и изображения. Текст и его граница должны обернуться вокруг изображения и его границы. Есть ли способ достичь этого?

Answer 1

То, что вы видите, на самом деле совершенно нормально. Представьте, что ваш текст станет более высоким, чем изображение, истинный обертку заставит текст двигаться под изображением, а не только в одном столбце слева от изображения. В конце концов, это целая цель поплавка (хотя его часто злоупотребляют разными способами). Что-то вроде этого:

 +------+---+   +------+---+ 
     |text |img|   |text |img| 
THIS: |text +---+ NOT THIS: |text +---+ 
     |text text |   |text | 
     +----------+   +------+ 

Ваш прецедент можно решить довольно легко, если предположить, что ваш фон имеет сплошной цвет. Вы можете просто маскировать границу текста, которую вы видите за изображением. Что-то вроде этого:

<img src='path/to/image'> 
<p>Lorem ipsum...</p> 


img { 
    float: right; 
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616; 
    margin: 7px 5px 5px 13px; 
    width: 250px; 
} 
p { 
    font-size: 19px; 
    white-space: pre-wrap; 
    border: 2px solid #F6B616; 
    padding: 5px; 
    margin: 5px; 
} 

Как you can see я добавил тень двойной ящик для к изображению, что имитирует эффект от границы с краем 5px. Большая разница - это белая форма, эта тень будет маскировать лежащую ниже границу текста, что дает эффект, которым вы пользуетесь.

Существуют и другие методы, такие как работа с псевдоэлементами (которые могут быть полезны, если у вас более сложный фон), но лично я нахожу этот метод самым легким для вашего случая использования.