kleines float-problem

[chris baumann]

.text {position:relative;width:225px;padding:5px;float:left}
.eingabe {position:relative;width:150px;padding:5px;float:left}
.pflicht  {position:relative;width:25px;padding:5px;float:clear}

Das funktioniert soweit ganz gut:

<div class=text>...</div>
<div class=eingabe>...</div>
<div class=pflicht>...</div>

Allerdings wenn ich jetzt nochmal das
gleiche mache:

<div class=text>...</div>
<div class=eingabe>...</div>
<div class=pflicht>...</div>

Wird es nicht darunter gesetzt, sondern
"fliegt" unterhalb von dem letzten pflicht-div
nach rechts...

Wo ist der Fehler bei den float?

[Cheatah]

Hi,

<div class=text>...</div>
<div class=eingabe>...</div>
<div class=pflicht>...</div>

hm. Das klingt nach <label> innerhalb einer <dl>.

Wo ist der Fehler bei den float?

Nirgendwo. Der Fehler liegt beim clear.

Cheatah

[chris baumann]

Wo ist der Fehler bei den float?
Nirgendwo. Der Fehler liegt beim clear.

So wäre es theoretisch (!) richtig, also immer 3 Blöcke nebeneinander, danach ein "Return" sozusagen, funktioniert aber auch nicht.

.text {position:relative;width:225px;padding:5px;float:left}
.eingabe {position:relative;width:150px;padding:5px;float:left}
.pflicht {position:relative;width:25px;padding:5px;clear:left}

<div class=text>...</div>
<div class=eingabe>...</div>
<div class=pflicht>...</div>

[Cheatah]

Hi,

So wäre es theoretisch (!) richtig,

wieso meinst Du dies?

Cheatah

[chris baumann]

So wäre es theoretisch (!) richtig,
wieso meinst Du dies?

Naja:

• 1. Div plazieren, nachfolgendes rechts dran (float:left)
• 2. Div plazieren, nachfolgendes rechts dran (float:left)
• 3. Div plazieren, nachfolgendes drunter und links (clear:left)

[Cheatah]

Hi,

• 1. Div plazieren, nachfolgendes rechts dran (float:left)

richtig,

• 2. Div plazieren, nachfolgendes rechts dran (float:left)

richtig,

• 3. Div plazieren, nachfolgendes drunter und links (clear:left)

falsch. Wobei die beiden "richtig" auch nur bedingt sind, für Deine Zwecke sind sie aber ausreichend.

Cheatah

[chris baumann]

grins, und was ist denn nun richtig? :-)

wenn ich beim 3. div das clear:left weglasse, stimmt es optisch auch wieder nicht.

[Cheatah]

Hi,

grins, und was ist denn nun richtig? :-)

wo hast Du denn versucht, dies herauszufinden?

wenn ich beim 3. div das clear:left weglasse, stimmt es optisch auch wieder nicht.

Ja, richtig.

Cheatah

[Gunther]

Hi Chris!

.text {position:relative;width:225px;padding:5px;float:left}
.eingabe {position:relative;width:150px;padding:5px;float:left}
.pflicht  {position:relative;width:25px;padding:5px;float:clear}

^^^^^
Float kann nur die Werte left, right oder none haben!-----------|
Clear ist ein eigenes Element, welches die Werte left,right oder both haben kann.

Das funktioniert soweit ganz gut:

<div class=text>...</div>
<div class=eingabe>...</div>
<div class=pflicht>...</div>

Allerdings wenn ich jetzt nochmal das
gleiche mache:

[1]

<div class=text>...</div>
<div class=eingabe>...</div>
<div class=pflicht>...</div>

Wird es nicht darunter gesetzt, sondern
"fliegt" unterhalb von dem letzten pflicht-div
nach rechts...

Wo ist der Fehler bei den float?

Der Fehler liegt in einem fehlenden clear:left begründet.
Eine einfache Lösung wäre das Einfügen der Zeile (bei [1]):
<br style="clear:left">

Für weitere Infos zu clear siehe u.a.: http://www.positioniseverything.net/easyclearing.html

Gruß Gunther

[chris baumann]

Der Fehler liegt in einem fehlenden clear:left begründet.
Eine einfache Lösung wäre das Einfügen der Zeile (bei [1]):
<br style="clear:left">

BR würde den Code nur unnötigt aufblähen...

Wieso geht das dann nicht:

.text {position:relative;width:225px;padding:5px;float:left}
.eingabe {position:relative;width:150px;padding:5px;float:left}
.pflicht {position:relative;width:25px;padding:5px;clear:left}

[Cheatah]

Hi,

BR würde den Code nur unnötigt aufblähen...

es wäre vor allem völlig fehl am Platz.

Wieso geht das dann nicht:

Lies noch einmal nach, was clear bewirkt. Kleiner Tipp: Deine Vermutung eines "danach" ist falsch.

Cheatah

[Struppi]

.text {position:relative;width:225px;padding:5px;float:left}
.eingabe {position:relative;width:150px;padding:5px;float:left}
.pflicht  {position:relative;width:25px;padding:5px;float:clear}

abgesehen von dem überflüssigen float in der dritten angabae. Kann es sein dass du eine Tabelle nachbauen willst?
Wieso nimmst du nicht einfach eine?

Struppi.