Ausprägungen eines Moduls. IE8

[Gunther]

Hi,

So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).

Nur bei V3!?
Und was ist bspw. mit V2?

V2 benötigt kein calc. Der Teil in Klammern ist nur Bonus.

Welcher Teil in welchen Klammern?

  
/* V2 */  
.module.v2 .module-header {  
    position: relative;  
    top: 100px;  
}  
.module.v2 .module-keyvisual {  
    height: 100px;  
}  

Sind die Pixel-Werte nicht abhängig von der Größe des jeweiligen Image!?

Gibt es einen zwingenden Grund für die "Divitis"?

Die Elemente mit der Klasse "module" sind eigentlich article-, section- oder aside-Elemente.
Da dass mit dem CSS-Problem an sich nichts zu tun hatte habe ich im Fiddle div-Elemente genommen. Weniger zu schreiben :D

Ich meinte eher:

  
<div class="module v2">  
    <header class="module-header">  
        <h1>V2: Foo<br/>multiline</h1>  
    </header>  
    <figure class="module-keyvisual">  
        <img src="http://placehold.it/400x100"/>  
    </figure>  
    <div class="module-body">  
        <p>  
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
        </p>  
    </div>  
</div>  

  
<div class="module v2">  
    <h1>V2: Foo<br/>multiline</h1>  
    <img src="http://placehold.it/400x100"/>  
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
    </p>  
</div>  

Ich weiß ja nicht wo und wozu diese "Module" verwendet werden sollen, aber ggf. gibt es halt jeweils nur die, die der jeweilige Browser auch unterstützt, bzw. entsprechende Javascript befeuerte Varianten.

Die Möglichkeit eines Javascript-Fallbacks oder Abstriche bei der Gestaltung zu machen habe ich im Kopf. Ich wollte nur wissen ob jemand eine CSS-Lösung hat.

OK, also Flexbox kommt nicht in Frage und die CSS-Varianten sollen alleine auch mind. IE >= 8 konform sein, richtig? Wobei die Größe des Images unbekannt ist?

Gruß Gunther