Обтекание изображений текстом и блочными элементами

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

Я попытался установить свой div как встроенный, и это сработало нормально, однако, как только я добавил внутрь этого div другие элементы, он все еще выглядел нормально, но при взгляде на него в Firebug маленькая синяя линия, которая показывает элемент, над которым вы наводите курсор, также расширяется над изображением, и когда я попытался добавить отступ в контейнер div, это не сработало, и вы могли видеть, что это было потому, что отступ был добавлен в самом конце.

В итоге я добился того, чтобы он выглядел нормально, но добавил отступ к изображению, однако это по-прежнему кажется неправильным, поскольку Firebug это не нравится, и я беспокоюсь о проблемах совместимости.

Вот изображение того, что я пытаюсь сделать ... серая область - это то место, где Я хочу, чтобы текст / элементы были обернуты, а коричневый - это изображение.

Вот пример кода: (Этот пример - версия без упаковки)

<div class="main">
    <img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" />
    <div class="details">
        <div class="about">
            <div class="title">
                About:
            </div>
            <div class="info">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                
            </div>
            <!-- Info Ends -->
        </div>
        <!-- About Ends -->
    </div>
    <!-- Details Ends -->
    <div class="contentClear"></div>
</div>
<!-- Main Ends -->

Пример CSS:

#content .wrapper .left .main {
    padding-top: 20px;
    width: 550px;
}

#content .wrapper .left .main .screenshot {
    float: right;
    border: 1px solid #c0c0c0;
    width: 275px;
}

#content .wrapper .left .main .details {
    width: 263px;
    padding-right: 10px;
}

#content .wrapper .left .main .details .title {
    color: #0F5688;
    font-size: 1.8em;
    font-family: arial;
    font-weight: bold;
}

#content .wrapper .left .main .details .info {
    margin-top: 6px;
    font-size: 1.3em;
    font-family: Arial;
    color: #636363;
    line-height: 1.6;
}

Вот изображение, показывающее проблему FireBug есть с ним (из примера JSFiddle), как я уже сказал, он выглядит нормально в браузере, но, видя, что полоса firebug полностью расширяется по изображению, я беспокоился, что это может вызвать проблемы ..