[TYPO3] CSS image layout problem

[Arne Schmitz]

I have a problem with the formatting of text w/image blocks. The images are 
floating (left or right) and overlap paragraphs that follow this block. The 
code generated by T3 looks e.g. like this:

<!--  Image block: [begin] -->
 <div class="csc-textpic csc-textpic-intext-right">
 <div class="csc-textpic-imagewrap">
  <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" 
style="width:300px;">
   <dt>
    <img src="uploads/pics/planefit.png" width="300" height="248" border="0" 
alt="" />
   </dt>
   <dd class="csc-textpic-caption">
   </dd>
  </dl>
 </div>
 <div class="csc-textpic-text">
 <!--  Text: [begin] -->
 <p class="bodytext">
	TEST
 </p>
 <p class="bodytext"> Test
 </p>
 <!--  Text: [end] -->
 </div>
 </div>
<!--  Image block: [end] -->

The image floats correctly, but sometimes overlaps the following paragraph 
and/or Header, which looks ugly. I do not use any special CSS for the 
csc-textpic-intext-right or the csc-textpic-imagewrap and so on. The only 
things in my CSS concerning this is here:

div.csc-header {
  background-color: #e0e0d0;
  color:#084028;
}

div.csc-textpicHeader {
  background-color:#e0e0d0;
  color:#084028;
}

The overlap occurs when the text left (or right) of the image is not high 
enough. Then the image overlaps the next header and/or paragraph. Also 
following floating images are pushed to the left (or right), depending on the 
previous image. If the text height is high enough, everything looks as 
expected. 

What shall I do to fix this? I guess this can be fixed by some CSS magic?

Arne

-- 
Dipl.-Inform. Arne Schmitz              Phone   +49 (0)241 80-21817
Computer Graphics Group                 Fax     +49 (0)241 80-22899
RWTH Aachen University                  http://www.rwth-graphics.de
Ahornstrasse 55, 52074 Aachen, Germany