Am Ende einer Div Box im IE6

[Ralph]

Ich habe eine div Box mit height:100%; float:right und habe dort am Anfang ein Bild. Am Ende soll ein bischen Text stehen. Nun schachtele ich in die div Box eine zweite hinein mit position:absolute; bottom:0px

Das klappt im Firefox wunderbar. Egal wie groß das Fenster ist, der Text steht am Ende unten in der Box.

Im IE6 landet der Inhalt dann rechts neben der übergeordneten div Box. Die Textbreite richtet sich wie es sein soll nach der Breite der übergeordneten div Box. Wegen des float right ist das Gesamtlayout dann immer um die textbreite größer als das Browserfensters

IE7 kann ich nicht testen, hab ich nicht hier.
Wie löse ich das im IE6? Wird das im IE7 korrekt angezeigt?

  
<div style="width:100px; height:100%; text-align:center; float:right; border:2px solid blue">  
  
	<img src="foto.jpg" width="100px">  
  
		<div style="position:absolute; bottom:20px">  
		Text<br>Text<br>Text  
		</div>  
</div>

[Beat]

IE7 kann ich nicht testen, hab ich nicht hier.
Wie löse ich das im IE6? Wird das im IE7 korrekt angezeigt?

<div style="width:100px; height:100%; text-align:center; float:right; border:2px solid blue">

<img src="foto.jpg" width="100px">

  <div style="position:absolute; bottom:20px">  
  Text<br>Text<br>Text  
  </div>  

</div>

  
Verwende position:relative für das gefloatete Element und positioniere dein div relativ zu diesem mit bottom:0 left:0  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[Ralph]

So:

  
<div style="width:100px; float:right; height:100%; border:1px black solid">  
	img src="foto.jpg" width="100px">  
  
	<div style="position:relative; bottom:0; left:0">  
	UNTEN  
	</div>  
  
</div>

Funktioniert nicht. Da klebt sich das div "UNTEN" direkt unten an das Bild aber nicht an den unteren Bottom der 100% hohen parent Box. Zumindest im IE6

[Beat]

So:

Nein

<div style="width:100px; float:right; height:100%; border:1px black solid">

hier relative

<img src="foto.jpg" width="100px">

<div style="position:relative; bottom:0; left:0">

hier absolute

UNTEN
</div>

</div>

  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische