HTML/CSS - aligner à droite et à gauche sur la même ligne?

Question

Tout d'abord, je sais qu'il existe des moyens de faire en sorte que le texte puisse être sur la même ligne. Mais je ne suis pas sûr de savoir comment prolonger cela. Voilà ce que j'ai jusqu'à présent:

Should be all the way across http://i33.tinypic.com/64i4uo.jpg

Comment pourrais-je être en mesure de faire en sorte qu'il va tout le chemin à travers, sans l'aide de tableaux?

C'est la partie HTML:

<p style="float: left;" class="details"><a href="#Top">To Top</a></p> 
<p style="float: right" class="details">Latest Version: 0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p> 

Ceci est la partie CSS:

.details { 
padding: 7px 15px; 
margin: 20px 15px 15px 15px; 
background: #111111;  
} 

Je ne voudrais pas vraiment avoir recours à des tables pour cela. Y a-t-il un moyen plus facile. Merci à tous ceux qui peuvent m'aider.

Answer 1

Ce divergeant un peu de ce que vous avez commencé, mais a été comme je l'ai fait dans le passé:

CSS:

.details { 
    clear: both; 
    padding: 7px 15px; 
    margin: 20px 15px 15px 15px; 
    background: #111111; 
    text-align: right; 
} 

.toplink { 
    float: left; 
} 

HTML:

<div class="details"> 
    <span class="toplink">To Top</span> 
    Latest Version: 0.3.6.17 | Downloads: 12 | Download 
</div> 

Answer 2

Ajoutez display:inline; à votre classe .details et assurez-vous que la div contenant est un élément de bloc et que son arrière-plan est défini sur gris.

Sinan.

Answer 3

Je l'ai fait de cette façon:

<style type="text/css"> 
#right { 
    float: right; 
} 

.details { 
    margin: 0 auto; 
    line-height: 0; 
} 
</style> 

<p class="details"><a href="#Top">To Top</a></p> 
<p id="right" class="details">Latest Version: 0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p> 

La partie délicate est que vous avez à zéro les marges supérieure et inférieure pour les deux et la hauteur de la ligne. Si vous faites cela, alors flottant à droite sur l'élément du bas s'aligne.