Besoin de deux div pour s'aligner correctement

Question

Here is a screenshot of how both div's lineup.

La colonne de gauche est, la div que je veux aligner à droite de celui-ci est

Et ces deux DIV sont à

.content-body { 
    padding:10px 15px; 
    font-size:.8em; 
    font-family:arial; 
    overflow:auto; 
} 

.col-left { 
    float:left; 
    position:relative; 
    overflow:auto; 
    height:100%; 
    width:20%; 
    padding:0 5px 0 0; 
} 

.col-middle { 
    width:auto; 
    height:auto; 
    float:left; 
    xmargin-top:5px; 
    xfont-size:.8em; 
    border:1px solid red; 
    font-family:arial; 
} 

Comment puis-je obtenir le div .col-milieu aligner correctement?

Toute aide est appréciée.

Answer 1

modifier la largeur de .col intermédiaire-80% ou moins afin que les deux divs peuvent être compatibles avec l'intérieur de leur contenant.

Vous pouvez également faire .col-middle float droite.

Answer 2

ajouter un

clear:none; 

à la fois vous colonne divs

et

width:80%; 

à votre colonne du milieu devrait leur permettre d'aller côte à côte :)

Answer 3

Une autre option (bien que vous devriez vraiment donner une largeur à la colonne de droite):

.col-middle { 
     ... 
     margin-left: 20%; 
    } 

Edit: Si vous donnez .col-milieu d'une marge gauche, Theres pas besoin de flotter ou de lui donner une largeur

Answer 4

col-milieu prend la largeur: 100%, donc vous devez fournir la largeur: moins de 80%.

une autre solution que vous pouvez faire est de faire la largeur: 79% et retirer le flotteur: à gauche et le faire afficher: table-cellule;

.col-middle { 
    width: 79% 
    height:auto; 
    display: table-cell; 
    xmargin-top:5px; 
    xfont-size:.8em; 
    border:1px solid red; 
    font-family:arial; 
}