[TYPO3] Image right or below text depending on layout width?

Fri Apr 28 13:21:37 CEST 2006

Gebhardt Thomas wrote:
> Hi,
> 
> On Friday 28 April 2006 11:20, Tapio Markula wrote:
> 
>>>It would be nice if the image would be positioned below the text
>>>when it does not fit on the right side.
> 
> 
>>AFAIK new css_styled_content use floating elements, which automatic
>>goes below text if image don't fit to the same row.
>>The old method use floating tables, which should behave the same.
> 
> 
> actually I'm using a recent 
> css_styled_content (v. 0.2.2)
> cron_cssstyledimgtext (v 0.4.1)
> together with typo3 4.0
> 
> which uses floating divs. Here is a minimal page generated by typo3,
> including the relevant css that shows the overlap effect.
> 
> Cheers, Thomas
> 
> 
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
> <head>
> <style type="text/css" media="all">
> 
> /* Needed for noRows setting */
> DIV.csi-textpic DIV.csi-imagecolumn { float: left; display: inline; }

display: inline; is *nonsense* in this connection - float means *always* 
'display:block' and display:inline is should be ingnored!
float means *always* floating *blocks*.

(in fact the behavior of float is *always* 'inline-block' regardless if 
you have set display:block or display:inline).

> 
> /* Right (in text) */
> DIV.csi-intext-right DIV.csi-imagewrap { float: right; }

> 
> </style>
> </head>
> <div class="csi-textpic csi-intext-right">
>   <div class="csi-imagewrap">
>     <dl class="csi-image" style="width:236px;">
>       <dt><img src="dummy.jpg" 
>           width="236" height="241" border="0" alt="Alt-Text" title="Titel" />
>       </dt>
>       <dd class="csi-caption"><p class="csc-caption">A Picture</p></dd>
>     </dl>
>   </div>
>   <div class="csi-text">
>     <ul>
>       <li>AAAAAAAAAAAAAAAAAAAAAAAAAAA</li>
>       <li>BBBBBBBBBBBBBBBBBBBBBBBBBBB</li>
>       <li>CCCCCCCCCCCCCCCCCCCCCCCCCCC</li>
>       <li>DDDDDDDDDDDDDDDDDDDDDDDDDDD</li>
>       <li>EEEEEEEEEEEEEEEEEEEEEEEEEEE</li>
>       <li>FFFFFFFFFFFFFFFFFFFFFFFFFFF</li>
>     </ul>
>   </div>
> </div>
> </html>

IMO this stucture is unreliable. The old method using floating tables 
works more reliable. Behavior or floating DIV might be unexpected in MS 
IE. That's why I don't like the "fine" new css_styled_content and in 
future I might use the old one.