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

[JoH]

>> Just for example, 'display:inline' on a floated element will fix IE's
>> 'doubled margin float bug' [1]; if I recall correctly it works on
>> some other 'haslayout' [2] type bugs in IE too.
>
> True, there are some "double margin fixes" applied in the default
> css_styled_content css. But I tried to mark all "hacks/fixes" in the
> CSS code, so that we can see where they came from, e.g:
>
> DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap
>   .csc-textpic-image { display: inline; /* IE fix for double-margin
>   bug */ margin-right: {$styles.content.imgtext.colSpace}px;
> }
>
> In this case (the floated columns), I haven't made any comment, so I'm
> not sure what it was used for, as there are no margins set for these
> columns.
>
>> [2] http://www.webmasterworld.com/forum83/6999.htm
>
> URL only accessible after "registering", which I don't wanna do. :)
> Here's an URL which seems to explain the problem:
>
> http://www.satzansatz.de/cssd/onhavinglayout.html

Just found this thread today and read it completely.
Here's a hint for CSS without hacks

There is a proper solution (not a hack) to get rid of those double margin
problems:
Don't use margins but position:relative and left to position floated
elements.
You can still use margin-top, margin-right and margin-bottom for the rest of
the margins.

Instead of this

div.whatever {
    float:left;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

 it should be this

div.whatever {
    float:left;
    position:relative;
    left:10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

HTH

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
openBC: http://www.cybercraft.de