HTML gauche et à droite Aligner les éléments

Question

Pour ce faire, je l'ai fait:

<table style="width:100%;"> 
<tr> 
    <td style="width:50%;text-align: left;">left</td> 
    <td style="width:50%;text-align: right;">right</td> 
    </tr> 
</table> 

Comment pourrais-je accomplir cela de la façon la plus simple (moins de balisage) sans utiliser les tables? Je veux juste aligner 2 éléments au maximum à gauche et à droite.

Il existe des centaines de 2 dispositions de colonnes, mais celles-ci sont plus alignées pour la mise en page et semblent surdimensionnées.

Answer 1

Certains html:

<div class="left">left</div> 
<div class="right">right</div> 

Certains CSS:

.left, .right { 
    width: 50%; /* Floated elements technically need a width specified. */ 
} 

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

Answer 2

Quelque chose comme ceci:

CSS

<style type="text/css"> 
#primary { 
    width: 100%; 
} 

.secondary { 
    width: 50%; 
} 

.leftcolumn { 
    float: left; 
    text-align: left; 
} 

.rightcolumn { 
    float: right; 
    text-align: right; 
} 
</style> 

HTML

<div id="primary"> 
    <div class="secondary leftcolumn"> 
     <p>This will be on the left</p> 
    </div> 
    <div class="secondary rightcolumn"> 
     <p>This will be on the right</p> 
    </div> 
</div> 

Bien que je changerais leftcolumn et rightcolumn à quelque chose de spécifique au contenu que chacun contiendra (en faveur d'une approche nommant semantic CSS plutôt que structurel).