nicht angemeldet
Wie bekomme ich das am besten hin?
CSS Autoren leben im irrigen Glauben, dass float so etwas wie column bedeute. Das ist nicht der Fall.
float bedeutet, dass ich etwas aus dem normalen Fluss entferne. Dabei wird der notwendige Platz reserviert, und die inline Boxen im normalen Fluss werden um diesen reservierten Bereich gefloatet.
Wenn dieser normale Fluss Blockboxen enthält, werden die margin werte nur relativ zum normalen Flow berechnet, solange kein block-formating Kontext vorliegt.
Erst wenn eine Block-box auch einen block-formating Kontext aufweist (welcher mit overflow:auto oder overflow:hidden getriggert werden kann), werden auch die margins relativ zum reservierten Raum angelegt.
Es folgt eine Demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{width:40em; border:10px solid #ccc;}
.float{ float:left; background: #fed;}
p {border:1px solid red;}
#a p{padding:1em;}
#b p{overflow:hidden;}
#c p{overflow:auto;}
#d p{margin-left:5em;}
</style>
</head>
<body>
<div id="a">
<div class="float">Ich bin ein Float</div>
<p>Ich bin ein Paragraph<br>
Sonderangabe: <code>padding:1em;</code><br>
mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p>
</div>
<div id="b">
<div class="float">Ich bin ein Float</div>
<p>Ich bin ein Paragraph <br>
Sonderangabe: <code>overflow:hidden;</code><br>
mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p>
</div>
<div id="c">
<div class="float">Ich bin ein Float</div>
<p>Ich bin ein Paragraph<br>
Sonderangabe: <code>overflow:auto; </code><br>
mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p>
</div>
<div id="d">
<div class="float">Ich bin ein Float</div>
<p>Ich bin ein Paragraph<br>
Sonderangabe: <code>margin-left:5em;</code><br>
mit etwas längerem Text, der das Umflussverhalten demonstrieren soll.</p>
</body>
</html>
Falls man keinen DOCTYPE HTML strict verwendet, braucht MSIE zusätzlich die Angabe zoom:1; damit bei overflow auch hasLayout getriggert wird.
Im Zusammenhang mit floats sollte man besser nur die strict Variante verwenden.
Ende der Belehrung.
mfg Beat
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische