alignement vertical et des flotteurs

Question

Je suis désolé si ma question semble stupide, mais j'ai passé trop de temps à ce sujet. J'ai un bloc d'affichage div contenant deux span, un sur la droite et l'autre sur la gauche.

<div class="user-bar"> 
    <span class="username">Martin GOYOT</span> 
    <span class="user-options"><input type="button" class="disconnect" value="déconnexion"/></span> 
</div> 

J'ai essayé deux choses pour les obtenir vertical aligné: premier, obtenir ces deux flotteurs, mais le problème est que je peux voir clairement qu'ils sont hors de flux (normal) et, par conséquent, si je demande un fond, au conteneur, il ne les couvre pas:

http://jsfiddle.net/M7Ffd/1/

deuxième solution, que le premier dans le flux et mettre le second comme un flotteur, mais le résultat est que je ne trouve pas comment les aligner verticalement:

http://jsfiddle.net/M7Ffd/2/ (attention au bouton, il n'est pas vraiment aligné verticalement même si ça ressemble)

Donc, la question est: quelle est la meilleure solution, et, comment réparer au moins l'un de ces deux mauvais comportements.

merci, et désolé, je suis un débutant css.

Answer 1

L'alignement vertical est un problème difficile. Et le flottement semble être la première solution de tout le monde pour tout. Évitez les GOTO, comment l'utilisation

position: absolute; 
right: 0; 

http://jsfiddle.net/M7Ffd/3/

Answer 2

Est-ce que vous voulez? violon here

.user-bar { 
padding: 0.5em; 
margin: 0 1em 1em 1em; 
background-color: green; 
font-weight: bold; 
font-size: 1.25em; 
height:30px; 
min-width:300px; 
} 
.user-options { 
display: inline-block; 
background-color: #CCC; 
float: right; 
} 
.username { 
float: left; 
background: yellowgreen; 
} 

Réglage de la largeur minimale et donnant hauteur résout la solution d'alignement + fond.

Answer 3

Utilisez le hack clearfix sur l'élément parent des deux enfants flottants pour résoudre votre problème.

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

Je mis à jour votre violon pour vous montrer http://jsfiddle.net/M7Ffd/5/