'vertical-align' greift nicht

[angelikamorgan]

Hallo Zusammen,

ich möchte 'Text1' nach unten ausrichten. Leider gelingt mir mein Vorhaben nicht :/
Eventuell sieht einer von euch auf Anhieb das Problem.

Danke
Angelika

Vorlage (Bild):
http://img15.imageshack.us/img15/3250/verticalalignnerv.jpg

#Test					
{ background-color: yellow; height:137px; width:243px; color:#3d3d3d; padding-left:10px; padding-top:4px;}
#Test .headline		
{ font-weight:bold; padding-bottom:4px; }
#Test-Innerbox		
{ float:left; }
#Test-Innerbox .ImageContainer
{ background-color: orange; height:63px; width:120px; padding-bottom:4px;}
#Test-Innerbox .image
{ float:left; background-color:red; height:63px; width:43px; }
#Test-Innerbox .text1
{ height:63px; vertical-align:bottom; /* text-bottom, baseline */ float;right;}
#Test-Innerbox .text2
{  }
#Test-Innerbox .text3
{ font-size:24px; font-weight:bold; }

<div id="Test">	
	<div class="headline">Text0</div>	
	<div id="Test-Innerbox">
		<div class="ImageContainer">
			<div class="image"></div>
			<div class="text1">Text1</div>
		</div>
		<div style="clear:left;"></div>
		<div class="text2">text2</div>
		<div class="text3">Text3</div>
	</div>	
	<div style="clear:both;"></div>
</div>

 

[Maik]

Hi,

vertical-align greift in einem Blockelement nur in Verbindung mit der display-Eigenschaft und einem Tabellenwert (table, table-cell).

Hierfür wird das Elternelement (.ImageContainer) mit display:table und das Nachfolgeelement (.text1), dessen Inhalt vertikal ausgerichtet werden soll, mit display:table-cell formatiert.

Siehe hierzu das Beispiel http://www.pmob.co.uk/temp/vertical-align9.htm, das zusätzlich für den IE einen Workaround beinhaltet, da er die display-Tabelleneigenschaftswerte in der aktuellen Version noch immer nicht zu interpretieren weiß.

mfg Maik