Was ist falsch beim Float? - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Was ist falsch beim Float?

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Was ist falsch beim Float?

Pages: [1]

geschrieben von zippy am 28.03.2008 - 21:04

http://web166.login-11.hoststar.at/test6.htm

Die kleinen DIVs sollen neben einander im großen DIV stehen. Über Tipps würde ich mich freuen.

geschrieben von zippy am 28.03.2008 - 21:16

Herzlichen Dank, falls sich jemand bemüht hat. Mittlerweile ist es gelöst: Ich hab jetzt das rechte DIV als zweites mit float:right geschrieben, und das mittlere danach, ohne float.

Da mich aber weiterhin interessiert, WARUM die ursprüngliche Variante bei manchen Brausis nicht funzt, lass ich das Beispiel online. Erklärung wäre toll, oder andere Alternativen.

geschrieben von Danny am 28.03.2008 - 21:24

Hallo,
also nebeneinander stehen sie auch bei mir, wenn ich mir deine Seite anschaue. Du meinst sicherlich das Problem mit dem Rahmen?
Füge mal unter den 3 <div> aber noch innerhalb des Großen <div> folgendes ein um den float aufzuheben

	HTML-Quelltext
1:	<div style="clear: both;"></div>

Schöne Grüße
Danny

geschrieben von zippy am 28.03.2008 - 22:45

Vielen Dank!

Genau das war es! Viel besser, als meine Lösung ...
Ich verstehe zwar nicht, WARUM das notwendig ist, aber es funzt.

geschrieben von okley am 28.03.2008 - 23:19

Die Lösung die zur Zeit online ist:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="width:800px;margin:auto;border:1px solid #000000;padding:10px;">
	


		<div style="width:200px;margin-right:9px;border:1px solid #000000;float:left;">linksdiv</div>
		<div style="width:400px;margin-right:9px;border:1px solid #000000;float:left;">mitteldiv</div>
		<div style="width:160px;margin-right:0px;border:1px solid #000000;float:right;">rechtsdiv</div>
		<div style="clear: both;"></div>
	

</div>
</body>
</html>

Die sieht in IE7 und Opera oder FF anders aus. Der untere Rahmenabstand ist unterschiedlich. Am einfachsten kannst du das mit einer zusätzlichen height und width angabe im clear div ändern:

	HTML-Quelltext
1:	<div style="height: 1px; width: 1px;clear:both;"></div>

Wenn du diesen clear div ganz weglässt siehst du in FF und Opera sehr schön was passiert. Und eigentlich auch muss. Der aussenliegende Div hat seine height auf auto. Das heisst er macht erstmal minimal Höhe (durch padding gegeben). Die Inhalte mit float geben keine Höhe an. Du könntest eine angeben, aber dann wäre sie nicht mehr dynamisch (IE kennt ja noch nicht lange die Eigenschaft min-height). Mit dem clear div fügst du quasi wieder ein normales Block Element ein(indem du den float aufhebst), welches über die height Angabe den unteren Rand des Äusseren div bestimmt.

Mit IE6 und früher hab ich nicht getestet.
Hoffe das war jetzt einigermassen verständlich ...