Floated div alignement vertical

Question

J'essaye d'aligner verticalement le texte dans un div flotté vers le bas mais cela ne semble pas fonctionner. Voici ce que j'ai actuellement:

<div class="header_left">TEXT</div> 

CSS:

.header_left { 
width: 50%; 
text-align: left; 
float: left; 
vertical-align: bottom; 
border-bottom: 1px solid #666; 
} 

J'ai besoin du div à flotter comme je veux placer 2 divs côte à côte, mais je ne peux pas sembler rendre le texte aller le fond de la div.

Answer 1

Working DEMO

Vous devez avoir 2 divs pour y parvenir avec la position relative et absolue.

<div id="container"> 
    <div id="content">Bottom Content</div> 
</div>​ 

#container 
{ 
    position: relative; 
    height: 200px; 
    background-color: #eee; 
} 

#content 
{ 
    position: absolute; 
    bottom: 0; 
}​ 

Answer 2

http://jsfiddle.net/2Z6tA/1/

<div class="header_left"> 
    <span id="bottom">Text at bottom</span> 
</div> 

CSS: -

.header_left { 
width: 50%; 
text-align: left; 
float: left; 
vertical-align: bottom; 
border-bottom: 1px solid #666; 
height:100px; 
position: relative;  
} 

span#bottom{ 
    position: absolute;  
    bottom: 0; 
} 

Answer 3

Une autre chose à essayer si vous ne voulez pas un conteneur div, définissez une marge supérieure inférieure &. Par exemple:

.header_left { 
margin-top:50% 
margin-bottom:50% 
} 

Vous devrez bricoler avec les mesures, 50% ne sont pas toujours la quantité à utiliser. J'ai utilisé 9% pour aligner verticalement un flottant: avant l'image sur un bouton sur un site mobile sur lequel je travaillais.