Hi,
es soll 4 verschiedene Ausprägungen geben.
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
IE8 kennt kein calc.
Wie kann ich das so umsetzen, dass es auch im IE8 funktioniert?
(Und am besten ohne die Maße des Bildes wissen zu müssen)
Für alle die kein jsFiddle mögen (und fürs Archiv):
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
[code lang=css] body {
padding: 2em;
}
figure {
margin: 0;
display: block;
}
h1 {
font-size: 18px;
font-weight: bold;
}
.module {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 1em;
max-width: 400px;
position: relative;
}
/* V2 */
.module.v2 .module-header {
position: relative;
top: 100px;
}
.module.v2 .module-keyvisual {
height: 100px;
}
.module.v2 .module-keyvisual img {
position: absolute;
top: 10px;
}
/* V3 */
.module.v3 .module-header {
float: right;
width: -webkit-calc(100% - 110px);
width: -moz-calc(100% - 110px);
width: calc(100% - 110px);
}
.module.v3 .module-keyvisual {
float: left;
margin: 0 10px 10px 0;
}
/* V4 */
.module.v4 .module-keyvisual {
float: left;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="module v1">
<header class="module-header">
<h1>V1: 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">
<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 v3">
<header class="module-header">
<h1>V3: Foo<br/>multiline</h1>
</header>
<figure class="module-keyvisual">
<img src="http://placehold.it/100x100"/>
</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 v4">
<header class="module-header">
<h1>V4: Foo<br/>multiline</h1>
</header>
<figure class="module-keyvisual">
<img src="http://placehold.it/100x100"/>
</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>
</body>
</html>[/code]
~dave