CSS Box float - clear

**martinm79** · 05-08-2008, 20:22

Also nach dem blauen Rahmen habe ich ja

Code:

<br style="clear:both;">

geschrieben, aber warum wird das nicht beachtet?

**Kropff** · 05-08-2008, 20:37

also bei mir sieht es so aus, wie es sein sollte, also bild 2. welche doctype hast du angegeben, welchen browser benutzt du?

peter

**martinm79** · 05-08-2008, 20:57

Hatte das im Thema geschrieben,aber er hatte das Thema beim 1. mal nicht gespeichert.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

Also ich habe mir jetzt den IE8 geholt und da sieht es so aus.
(kann ich jedem nur empfehlen sich darauf vorzubereiten)

Im IE 8 soll css2.1 sein oder so.^^
Aber was ist daran anders, bzw. warum verschiebt sich das alles?

**Kropff** · 05-08-2008, 21:04

probier mal als doctype xhtml 1.0 transitional. das hatte ich bei mir vorgegeben. mit html transitional arbeite ich seit über drei jahren nicht mehr. also k.a.

peter

**martinm79** · 05-08-2008, 21:20

Nicht schlecht, bisschen was hat sich getan.
Ich habe

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

in

Code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

geändert und denn sieht es nicht mehr so:

sondern so:

aus.
Aber wie erreiche ich das die blauen Boxen komplett in der roten Box kommt?
Ich danke dir sehr für CSS4You, das war früher immer mein nachschlagewerk

Kommt da noch irgendwann was für css2 ? ^^

**martinm79** · 05-08-2008, 21:57

Nachdem ich aus

Code:

<br style="clear:both;">

das gemacht hatte:

Code:

<br style="clear:both;display:block;">

und es auch nicht klappte, hatte ich:

Code:

<div style="clear:both;"></div>

verwendet und denn klappte es,wie es sollte im
IE5.5 IE6 und IE8 und Firefox.
Müßte ich nur noch im IE7 testen.

**martinm79** · 05-08-2008, 22:03

Ich hab mal noch ein line-height reingemacht und auch mit float: right probiert. Wunderbar auch im IE7.

Code:

<div style="width: 300px; border:1px solid green;">

	<!--Inhalt-->
	<div style="border:1px solid red;">

		<div style="float: left;border:1px solid blue;">
			1. linke Box
		</div>
		<div style="float: right;border:1px solid blue;">
			2. Box <br>mit mehr Inhalt
		</div>
		<div style="clear:both;line-height: 0;"></div>
	</div>

	Text unten
</div>

CSS Box float - clear