nicht angemeldet
Hallo,
Ich verstehe nicht, warum die Kasterln nicht neben- sondern untereinander stehen, wenn man das <<class="fl">> vom rechten div entfernt.
Ein fehlendes float impliziert ein clear:both.
Nein.
http://www.w3.org/TR/CSS2/visuren.html#floats
Es ist vielmehr so, dass die FLOAT-Property eines Elements die linke/rechte obere Ecke eines folgenden Block-Elements im normalen Fluss nicht beeinflussen sollte. Einzig Inline-Flow fließt, soweit möglich, um das Element herum (siehe Version2 im unten stehenden Beispiel). Nur der IE rendert das anders. Opera 7 rendert das nicht ganz richtig, weil er Probleme mit dem Margin-bottom des vorhergehenden Elements im normalen Fluss hat, wenn dieses nicht explizit definiert ist. Gibt man für das dem FLOAT-Element folgende Element im normalen Fuss einen ausreichend großen Margin-left vor, sollte dieses also neben dem FLOAT-Element stehen (Version3). Nur Opera 7 rendert das falsch, solange nicht Margin-bottom des vorhergehenden Elements im normalen Fluss explizit gesetzt ist (Version3a). Mehrere FLOAT-Elemente sind natürlich alle aus dem normalen Fluss herausgelöst. Deshalb stehen sie soweit oben, wie es ihnen das letzte vorhergehende Element im normalen Fluss erlaubt und soweit links/rechts, wie es die vorhergehenden FLOAT-Elemente erlauben (Version4).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Floats</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
div.c1 {border:1px solid black; width:50px; height:50px;}
div.c2 {border:1px solid blue; width:70px; height:70px;}
h2 {clear:both;}
-->
</style>
</head>
<body>
<h2>Version 1</h2>
<div class="c1">DIV V101</div>
<div class="c2">DIV V102</div>
<h2>Version 2 (falsch in IE und Opera 7)</h2>
<div class="c1" style="float:left;">DIV V201</div>
<div class="c2">f l u s s DIV V202</div>
<h2>Version 3 (falsch in Opera 7)</h2>
<div class="c1" style="float:left;">DIV V301</div>
<div class="c2" style="margin-left:60px;">DIV V302</div>
<h2>Version 3a</h2>
<p style="margin-bottom:2px;">Margin-Setzer für Opera</p>
<div class="c1" style="float:left;">DIV V3a01</div>
<div class="c2" style="margin-left:60px;">DIV V3a02</div>
<h2>Version 4</h2>
<div class="c1" style="float:left;">DIV V401</div>
<div class="c2" style="float:left;">DIV V402</div>
<h2>Version 5</h2>
<div class="c1" style="float:left;">Hier steht etwas mehr Text</div>
<div class="c2" style="float:left;">zum Testen des Verhaltens bei Überlauf.</div>
<h2>Version 5a</h2>
<p style="margin-bottom:2px;">Margin-Setzer für Opera</p>
<div class="c1" style="float:left;">Hier steht etwas mehr Text</div>
<div class="c2" style="margin-left:60px;">zum Testen des Verhaltens bei Überlauf.</div>
</body>
</html>
viele Grüße
Axel