Comment créer une mise en page stable à deux colonnes en HTML / CSS
Je veux un conteneur à deux colonnes. Détails:
Le conteneur
- La largeur doit s’ajuster à 100% de son élément parent (facilement accompli).
- La hauteur doit s’ajuster pour contenir les deux colonnes (c’est-à-dire que sa hauteur doit être exactement égale à la plus grande des deux colonnes, afin qu’il n’y ait pas de dépassement et que les barres de défilement ne soient jamais affichées).
- Devrait avoir une taille minimale égale au double de la largeur de la colonne de gauche.
Les colonnes en général
- Devrait être de hauteur variable, en ajustant à la hauteur de leur contenu.
- Devraient être côte à côte, de telle sorte que leurs bords supérieurs soient alignés.
- Ne devrait pas casser la mise en page ni se recouvrir les uns des autres si même un seul pixel de bordure, de remplissage ou de marge est appliqué à l'un ou l'autre, car cela serait extrêmement instable et regrettable.
La colonne de gauche spécifiquement
- Doit avoir une largeur absolue fixe en pixels.
La colonne de droite en particulier
- La largeur doit remplir l'espace restant dans le conteneur. En d'autres termes...
- La largeur doit être égale à la largeur du conteneur moins la largeur de la colonne de gauche, de sorte que si je place un élément de bloc DIV dans cette colonne, définissez sa largeur sur 100%, donnez-lui une hauteur de 10px et donnez-lui une couleur d'arrière-plan, Je vais voir une bande colorée de 10 pixels de haut qui va du bord droit de la colonne de gauche au bord droit du conteneur (c’est-à-dire qu’elle remplit la largeur de la colonne de droite).
Stabilité requise
Le conteneur doit pouvoir redimensionner (en redimensionnant la fenêtre du navigateur) jusqu’à sa largeur minimale (spécifiée précédemment) ou à une largeur beaucoup plus grande sans rompre la présentation. "Breaking" inclurait la colonne de gauche changeant de taille (rappelez-vous que sa largeur de pixel était supposée être fixe), la colonne de droite enveloppant la colonne de gauche, des barres de défilement apparaissant, les éléments de bloc de la colonne de droite ne prenant pas toute la largeur de la colonne et, en général, l’une quelconque des spécifications susmentionnées n’est pas vraie.
Contexte
Si des éléments flottants sont utilisés, il ne devrait pas y avoir de risque que la colonne de droite soit placée sous la colonne de gauche, ni que le conteneur ne contienne pas les deux colonnes (en coupant une partie de la colonne ou en permettant à une partie des colonnes de dépasser de sa limite ), ou que des barres de défilement apparaîtront (je me lasserais donc de suggérer l’utilisation de quelque chose d’autre que débordement: caché pour déclencher le confinement d’éléments flottants). L'application de bordures aux colonnes ne doit pas casser la mise en page. Le contenu des colonnes, en particulier de la colonne de droite, ne doit pas altérer la présentation.
Il semble y avoir une solution simple, basée sur un tableau, mais qui échoue lamentablement dans toutes les circonstances. Par exemple, dans Safari, ma colonne de gauche à largeur fixe sera réduite si le conteneur devient trop petit, au lieu de conserver la largeur que j'ai spécifiée. Il semble également que la largeur CSS, lorsqu'elle est appliquée à un élément TD, fait référence à une largeur minimale, de sorte que si un élément plus grand est placé à l'intérieur, il s'agrandira. J'ai essayé using table-layout: résolu; n'aide pas. J'ai aussi vu le cas où l'élément TD représentant la colonne de droite ne s'agrandira pas pour remplir la zone restante ou semblera ressembler à (par exemple, une troisième colonne de 1 px de large sera poussée complètement vers la droite), mais le fait de placer une bordure autour de la colonne de droite montrera qu’il est aussi large que son contenu en ligne, et que les éléments de niveau bloc dont la largeur est définie sur 100% ne remplissent pas la largeur de la colonne, mais correspondent à la largeur du contenu en-ligne (c'est-à-dire que la largeur du TD semble dépendre entièrement du contenu).
ne solution potentielle J'ai vu est trop complexe; Je me moque de IE6, tant qu'il fonctionne dans IE8, Firefox 4 et Safari 5.
Voici:
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
/* Change this to whatever the width of your left column is*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>Voir en action ici: http://jsfiddle.net/FVLMX/
Je me moque de IE6, tant qu'il fonctionne dans IE8, Firefox 4 et Safari 5
Ceci me rend heureux.
Essayez ceci: Démo en direct
display: table est étonnamment bon. Une fois que vous ne vous souciez pas d'IE7, vous êtes libre de l'utiliser. Il n'a pas vraiment les inconvénients habituels de <table>.
CSS:
#container {
background: #ccc;
display: table
}
#left, #right {
display: table-cell
}
#left {
width: 150px;
background: #f0f;
border: 5px dotted blue;
}
#right {
background: #aaa;
border: 3px solid #000
}
Part de gâteau.
Utilisez 960Grids Accédez à constructeur automatique de la mise en page et créez un modèle fluide à deux colonnes. Construisez une colonne de gauche correspondant à la largeur des grilles qui fonctionne. C'est le seul défi que vous utilisez les grilles. C'est très facile une fois que vous avez lu un tutoriel. En un mot, chaque colonne d'une grille a une certaine largeur et vous définissez le nombre de colonnes que vous souhaitez utiliser. Pour obtenir une colonne ayant exactement une certaine largeur, vous devez ajuster votre calcul afin que la largeur de votre colonne soit exacte. Pas trop dur.
Aucune chance de finir, car d'autres ont déjà combattu pour vous. Compatibilité dans la mesure où vous aurez probablement besoin d'aller. Rapide et facile .... Maintenant, téléchargez, personnalisez et déployez.
Voila. Grilles FTW.