Zwei Texte nebeneinander nach unten ausgerichtet setzen

[Stahli]

Hi,

mir ist das schon öfters aufgefallen, ich habe aber noch keine gute Lösung für das Problem gefunden.

Ich möchte zwei Texte wie folgt anordnen.

  
+--A-----------------+  
| Lorem ipsum, Lorem |  
| ipsum, Lorem ipsum |  
| Lorem ipsum, Lorem |  
| ipsum, Lorem ipsum |  
| Lorem ipsum, Lorem |  
| ipsum, Lorem ipsum |  
| Lorem ipsum, Lorem |  +--B----------+  
| ipsum, Lorem ipsum |  | Lorem ipsum |  
+--------------------+  +-------------+  

Beziehungsweise wie folgt.

  
+--A-----------------+  +--B----------+  
| Lorem ipsum, Lorem |  |             |  
| ipsum, Lorem ipsum |  |             |  
| Lorem ipsum, Lorem |  |             |  
| ipsum, Lorem ipsum |  |             |  
| Lorem ipsum, Lorem |  |             |  
| ipsum, Lorem ipsum |  |             |  
| Lorem ipsum, Lorem |  |             |  
| ipsum, Lorem ipsum |  | Lorem ipsum |  
+--------------------+  +-------------|  

Text B ist immer ein Einzeiler, die Länge von Text A ist variabel. Um den Text B am unteren Rand von A ausrichten zu lassen muss ich immer mit [margin|padding]-top oder height und vertical-align arbeiten und entsprechende feste Pixelangaben verwenden, damit ich mein Ziel erreiche, was nicht sonderlich schön ist. Ich könnte eine Tabelle verwenden, da es sich aber nicht um tabellarischen Inhalt handelt würde ich gerne davon absehen. Am Besten wäre soetwas wie

  
div.B{  
  float:right;  
  vertical-align:bottom;  
  height:next-silbing;  
}  

Könnte man soetwas vielleicht in CSS 3.1 aufnehmen? :) Oder ist das nicht nötig?

Gruß,
Felix

[Ingo Turski]

Hi,

Könnte man soetwas vielleicht in CSS 3.1 aufnehmen? :) Oder ist das nicht nötig?

das sollte auch mit CSS 2 gehen (ungetestet):

<div class="wrap">
  <p class="A">...</p>
  <p class="B">...</P>
</div>

.wrap { position:relative }
.A { float:left; width:50% }
.B { position absolute; right:0; bottom:0 }

freundliche Grüße
Ingo

[Stahli]

Hi,

das sollte auch mit CSS 2 gehen (ungetestet):

Ok, das war schonmal die richtige Idee (position:relative und dann position:absolute). Das Beispiel klappte noch nicht 100%ig, so hab ich es jetzt hinbekommen.

  
<div class="wrap">  
  <p class="B">...</p>  
  <p class="A">...</P>  
</div>  

und

  
.wrap {  
  position:relative;  
}  
  
.A {  
  width:50%;  
}  
  
.B {  
  position: absolute;  
  right:0;  
  bottom:0;  
}  

Danke!

Gruß,
Felix