Durch Browsergröße verändern verrutscht Text.

[shockshell]

Hi,

ich versuche gerade hinzubekommen, dass ich innerhalb einer Liste einen Text linksbündig und einen rechtsbündig ausrichte.
Ich hatte gedacht ich könnte das über divs und float:right machen. Aber dann, wenn ich das Browserfenster verkleinere und der Platz nicht mehr ausreicht, beide Texte in einer Zeile darzustellen, verrutscht er den linken Text eine Zeile tiefer. Das soll er aber nicht. Wenn der Platz nicht ausreicht, soll er halt nichts mehr machen.

Hier mal mein Code soweit

<li>
     <div style="float:right">rechter Text</div>
     <div>linker Text</div>
</li>

Was muss ich ändern damit der Text beim Verkleinern des Browsers nicht nach unten rutscht?

Danke für die Hilfe.

Marcus.

 

[hpvw]

Eine Box machst Du mit float:right; und einen mit float:left;.
Du gibst beiden eine prozentuale Breite, deren Summe (plus margins, borders und paddings) kleiner als 100% ist. Dann sollte sich da keiner unter den anderen setzen.

Wenn die fließenden Boxen Rahmen oder Abstände haben sollen, würde ich Dir empfehlen, jeweils zwei Boxen ineinander zu verschachteln. Die jeweils Äußere erhält eine Breite von 50% (bzw. beide in Summe 100%) und die float-Eigenschaft, jedoch keine Rahmen oder Abstände (explizit auf 0 setzen). Für die jeweils innere Box definierst Du Rahmen und Abstände, jedoch keine Breite (nicht 0 setzen, sondern nicht definieren) und keine float-Eigenschaft.

Das folgende Element sollte ggf. die Eigenschaft clear:both; erhalten.

Gruß hpvw

 

[shockshell]

Ok,

danke für die schnelle Antwort.

Hab das jetzt soweit:

<li>
<div style="float:left;">linker Text</div>
<div style="float:right;clear:both">rechter Text</div>
</li>

Jetzt rutscht das zweite Div nicht mehr nach unten.
Das Problem ist nun aber, dass das li eine Hintergrundfarbe hat und 98% der gesamten Browserfläche einnimmt. Jetzt rutscht der rechtsstehende Text beim verkleinern nach rechts aus dem Fensterrand (ist ja ok), aber das li verkleinert sich immer weiter, so dass es aussieht, als ob der Text nicht vom li umschlossen wird, sondern irgendwie dadrüber liegt?
Hoffe ich konnte das halbwegs erklären?

Marcus

Edit. Irgendwie sieht das auch nur im I.E. gut aus. "Die Anderen" stellen das nicht korrekt dar.