Mise en page CSS à deux colonnes sans avoir à spécifier la colonne de droite

J'essaie de comprendre comment créer une mise en page qui afficherait deux colonnes, une à gauche et une à droite. Je suis cool de spécifier la largeur de la colonne de gauche, mais à cause des marges et des paddings, je ne veux vraiment pas spécifier la largeur de la colonne de droite et laisser le choix au navigateur.Mise en page CSS à deux colonnes sans avoir à spécifier la colonne de droite

Je ne trouve aucun exemple en faisant cela, les gens semblent toujours donner à toutes les colonnes une largeur fixe. Voici quelques exemples de code qui reproduit le problème:

<html> 
<head> 
    <style type="text/css"> 
    #left, #right { 
    border: solid 1px #000000; 
    } 

    #left { 
    float: left; 
    width: 10%; 
    } 

    #right { 
    float: left; 
    } 
    </style> 
</head> 
<body> 
    <div id="left">I'm left</div> 
    <div id="right"> 
    <p>I'm right.</p> 
    <p>There is a bit more text here.</p> 
    <p>Let's assume for a moment, that there is so much text here, 
    that it cannot possibly fit on one line on any kind of monitor. 
    For this purpose, I have to write a bit of nonsense, but there is 
    always enough nonsense for this kind of task in the world. 
    I could always ask a politician, I'm sure there isn't even a single 
    cinema canvas in the world that could display such nonsense in a 
    single line. 
    </div> 
</body> 
</html>

Notez que si je supprimerais le paragraphe particulièrement long, la colonne de droite serait assez petit pour tenir dans la même ligne et il travaillerait.

Y a-t-il un moyen de faire en sorte que la colonne de droite occupe l'espace restant?

Source

2010-07-20 theone

Cela ferait pour vous:

#left { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 200px; 
} 

#right { 
    padding-left: 200px; 
}

Source

2010-07-20 15:39:46 Pat

Je crois que ce que vous avez déjà répond à vos besoins si vous l'ouvrez dans Internet Explorer. Mais, pour Firefox, définissez la propriété d'affichage de ces deux divs à la table. Notez que cette valeur n'est pas définie dans IE.

#left, #right { 
    border: solid 1px #000000; 
    display: table; 
}

Source

2010-07-20 15:42:01

L'astuce est de mettre overflow: hidden dans le panneau de droite:

#left, #right { 
     border: solid 1px #000000; 
} 

#left { 
     float: left; 
     width: 10%; 
} 

#right { 
     overflow: hidden; 
}

Source

2010-07-20 18:17:16 fhd

Mise en page CSS à deux colonnes sans avoir à spécifier la colonne de droite

Répondre

Questions connexes