divs rutschen ineinander

[nance]

Hallo!

Bin gerade am verzweifeln. Ich will ein Formular mittels div ausrichten. Da ich die Daten mittels XSL bekomme, weiß ich nicht wieviel Platz ich tatsächlich benötige. Also gebe ich keine Höhe an. Ich habe aber Elemente, die eine Beschreibung voranstellen und eine Eingabe verlangen. Ich erstelle dafür also ein div über die gesamte Breite, das ich wiederum in 2 "Spalten" unterteile. Eine Linke, in der der Text rechts ausgerichtet wird und eine Rechte, das das Eingabefeld enthält und links ausgerichtet ist. Nun habe ich aber das Problem, dass dieses rechte Div zu sehr nach links rutscht (aber nicht bis an den Rand). Ausserdem rutscht das nachfolgende Div (nächste Zeile) direkt unter die Schrift des linken Div, so dass sich die Eingabefelder überschneiden. Habe schon allerhand probiert und nachgeschaut, kann mir das aber nicht erklären.
Vielleicht kann mir einer von euch sagen woran es liegen könnte oder das Problem gar lösen.

Hier der relevante Quelltext:
<div style="position: relative; padding: .5em;">
  <p style="text-align: justify;">Beschreibungstext</p>
</div>
<!-- wie gewünscht -->

<div style="position: relative; padding: .5em;">
  <div style="posittion: relative; padding: .5em; border: 1px solid #000077; width: 45%; text-align: right; float: left; display: inline;">
    <p>Name</p>
  </div>
  <div style="posittion: relative; padding: .5em; border: 1px solid #000077; width: 50%; clear: left;">
    <input value="" size="40" maxlength="32" type="text" name="Name">
  </div>
<!-- rutsch nach links -->
</div>

<div style="position: relative; padding: .5em;">
  <div style="posittion: relative; padding: .5em; border: 1px solid #000077; width: 45%; text-align: right; float: left; display: inline;">
    <p>Wohnort</p>
  </div>
  <div style="posittion: relative; padding: .5em; border: 1px solid #000077; width: 50%; clear: left;">
    <input value="" size="40" maxlength="4" type="text" name="Wohnort">
  </div>
<!-- rutsch auch wieder nach links -->
</div>
<!-- rutscht komplett nach oben bis an den Text des vorangegangenen

Danke für die Hilfe.

Gruß
nance

[Aybee]

Hallo nance,

ich hab deinen Code mal ein wenig bearbeitet, vielleicht bringt dich das ja näher an deine gewünschte Lösung. Ich würde die links-rechts Aufteilung allerdings mit einer Tabelle machen.

<div style=" padding: .5em;">  
  <div style=" padding: .5em; border: 1px solid #ff0000; width: 45%; text-align: right; float: left;">  
    <p>Name</p>  
  </div>  
  <div style=" padding: .5em;  border: 1px solid #00ff00; width: 95%; ">  
    <input value="" size="40" maxlength="32" type="text" name="Name">  
  </div>  
</div>  
  
<div style="clear: left; padding: .5em;">  
  <div style=" padding: .5em; border: 1px solid #0000ff; width: 45%; text-align: right; float: left; ">  
    <p>Wohnort</p>  
  </div>  
  <div style=" padding: .5em; border: 1px solid #ffff00; width: 95%; ">  
    <input value="" size="40" maxlength="4" type="text" name="Wohnort">  
  </div>  
</div>

Gruß von Aybee

[nance]

Hallo Aybee,

Funktioniert leider auch nicht so, wie gedacht. Da werde ich wohl wieder auf die altbewährten Tabellen zurückgreifen müssen. Trotzdem vielen Dank für deine Mühen.

Gruß
nance

[Utz]

Hallo,

das kann doch nicht so schwer sein, hab ich gedacht. Allerdings auch nicht richtig hingekriegt. So weit bin ich gekommen:

<div class="container">

<div class="float">
<p>Wohnort</p>
</div>

<div class="float2">
<p><form><input value="" size="40" maxlength="4" type="text" name="Wohnort"></form></p>
</div>

</div>

in Verbindung mit:

div.container
  {
  width: 100%;
  background-color: aqua;
}

div.float
  {
  float: left;
  background-color: red;
  padding: .5em;
  border: 1px solid #000077;
  width: 45%;
  text-align: right;
  }

div.float2
  {
  background-color: yellow;
  padding: .5em;
  border: 1px solid #000077;
  margin-left: 45%;
  width: 50%;
  }

Der "Trick" besteht darin, dem zweiten Div ein margin-left mitzugeben. Das Problem darin ist, dass zumindest für meinen Mozilla "45%" bei width was anderes ist als für margin-left.

Baust Du das Ganze mit <p>s statt <div>s braucht zumindest mein Mozilla diese Krücke nicht und es geht besser.

Grüße,
Utz

[Ingo Turski]

Hi,

Der "Trick" besteht darin, dem zweiten Div ein margin-left mitzugeben. Das Problem darin ist, dass zumindest für meinen Mozilla "45%" bei width was anderes ist als für margin-left.

Nein, es sind beide Male 45%. Was Du übersiehst ist, daß die zweite Box nicht erst neben der floatenden Box beginnt, sondern nur ihr Inhalt daneben platziert wird bzw. würde, wenn denn eine ausreichende Breite zur Verfügung stünde.

Übrigens: selbst für einen Testcase sind die Klassifizierungen unsinnig gewählt.

freundliche Grüße
Ingo

[Utz]

Hallo Ingo,

Nein, es sind beide Male 45%. Was Du übersiehst ist, daß die zweite Box nicht erst neben der floatenden Box beginnt, sondern nur ihr Inhalt daneben platziert wird bzw. würde, wenn denn eine ausreichende Breite zur Verfügung stünde.

Nach ca. fünfmaligem verständnislosen Lesen glaube ich kapiert zu haben, dass Du mich nicht verstanden hast :-) Ohne margin-left wird weder der "Beginn" der zweiten Box noch ihr Inhalt neben der ersten dargestellt, sondern die Box darüberliegend (nicht oben, sondern im Stile von Layern), der Inhalt darunter (unten, nicht im Stile von Layern). Ich bin mir sehr sicher, über dieses Phänomen bereits irgendwann irgendwo gelesen zu haben, wo es einen sehr griffigen Namen hatte, nach dem man leicht googeln könnte, wenn man sich daran erinnerte :-)

Übrigens: selbst für einen Testcase sind die Klassifizierungen unsinnig gewählt.

Ich hab Dich auch lieb! *g*

Grüße,
Utz

[Ingo Turski]

Hi,

Nach ca. fünfmaligem verständnislosen Lesen glaube ich kapiert zu haben, dass Du mich nicht verstanden hast :-)

vielleicht hilft Dir http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell beim Verständnis?

Ich bin mir sehr sicher, über dieses Phänomen bereits irgendwann irgendwo gelesen zu haben

Erst kürzlich gab es einen Thread hier mit genau dieser Verständnisfrage. Sogar mit Online-Beispielen zur Verdeutlichung.

freundliche Grüße
Ingo

[Utz]

Hallo Ingo,

vielleicht hilft Dir http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell beim Verständnis?

Ja, zumindest teilweise, danke. Mir war nicht klar gewesen, dass die Breitenangabe der zweiten Box prinzipiell ab dem linken Rand gerechnet wird, daher in diesem Fall nicht genügend Platz für das Input-Feld ist und deshalb umgebrochen wird - und dass daher meine margin-width-Bastelei tatsächlich das adäquate Mittel der Wahl ist. So bin ich trotz Unkenntnis der Hintergründe auf den richtigen Weg gestolpert :-)

Unklar blieb mir aber nach wie vor, warum bei width:45% für die erste Box und margin-left:45% für die zweite Box sich die beiden Boxen nach wie vor etwas überlappen. Das hab ich aber mittlerweile auch begriffen - es liegt am Padding, das dabei natürlich mitbedacht werden muss.

Hoffen wir, dass der OP das alles hier noch liest, ich denke, es hülfe ihm.

Erst kürzlich gab es einen Thread hier mit genau dieser Verständnisfrage. Sogar mit Online-Beispielen zur Verdeutlichung.

Ne, das hatte ich an anderer Stelle gelsen.

Grüße,
Utz