当存在左浮动图像时，使用悬挂缩进格式化段落

Question

I've got the following HTML, generated by TYPO3 (simplified):

<div class="image">
    <img src="some-image.jpg"/>
</div>
<div class="text">
<p>
    <b>foo</b> Some text of varying length, sometimes multiple lines, sometimes not. sit amet enim ultrices a tempus nulla lobortis.
</p>
<p>
    <b>bar</b> Short text.
</p>
<p>
    <b>baz</b> Another paragraph. sit amet enim ultrices a tempus nulla lobortis. Cum ociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed felis mauris, in rhoncus nisl.
</p>

</div>

The image div is floated left, and the paragraphs should be formatted as list (hanging indent) with the part in <b> -tags as bullet. So the result should look like this:

-------------------- foo Some text of varying length, sometimes
|                  |     multiple lines, sometimes not. sit amet enim
|                  |     ultrices a tempus nulla lobortis.
|      Image       | 
|                  | bar Short text.
--------------------
baz Another paragraph. sit amet enim ultrices a tempus nulla lobortis.
    Cum ociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam sed felis mauris, in rhoncus nisl.

How do I achieve this behaviour?

My attempt was to indent the whole paragraph with p {padding-left: 50px;} and unindent the bold tags with pb:first-child {margin-left: -50px;} . That works fine if there is no image or the image is floated to the right, but when the image is floated left, the "bullets" ( <b> -tags) are rendered on top of the image. I've tried other approaches (using text-indent and such things) as well, but the problem basically stays the same.

The solution doesn't need to (:-)) work on IE6, and if it does not work in some other browser, that would probably be acceptable.

EDIT: Ok, I've got a solution which uses TYPO3 facilities: Change the image appearance type of the content element from "in text, left" to "besides text, left". Then TYPO3 adds a large enough left margin to the div with class text , and everything works fine. If the list is longer than the image, you've got to split the content element into two, to make the paragraphs below the image display left again.

Answer 1

<div class="contain">
<div class="image">
<img src="some-image.jpg"/>
</div>
<div class="text">
<p style="margin-bottom:20px;text-indent:-20px;">
<b>foo</b> Some text of varying length, sometimes multiple lines, sometimes not. sit amet enim ultrices a tempus nulla lobortis.
</p>
<p style="text-indent:-20px;" >
<b>bar</b> Short text.
</p>
<p style="clear:both;text-indent:-20px;margin-left:20px;">
<b>baz</b> Another paragraph. sit amet enim ultrices a tempus nulla lobortis. Cum ociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed felis mauris, in rhoncus nisl.
</p>
</div>
</div>​

CSS:

.contain{
  width:400px;
 }
.image{
 margin-top:15px;
 margin-right:30px;
 float:left;
 width:120px;
 height:80px;
 border:thin red solid;
 }​

DEMO

Answer 2

I'm not quite sure this is what you are looking for, but I use clear: both; in my CSS when I want to 'escape' from floating objects.

.clearfloat
{
    clear:both;
}

For example:

<img class="float"> ... </>
<h1 class="clearfloat"> Hello </h1>