html - même - css mise en page 2 colonnes




Comment créer une mise en page stable à deux colonnes en HTML/CSS (2)

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)
  • Doit 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 briser la mise en page ni se recouvrir les uns des autres si 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 d'environ 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 fixe), la colonne de droite enveloppant celle 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, se réfère à une largeur minimale, de telle sorte que si un élément plus grand est placé à l'intérieur, l'élément est agrandi. J'ai essayé d'utiliser table-layout: fixed; n'aide pas. J'ai également 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 l'être (par exemple, une troisième colonne de 1px large sera poussée complètement à droite), 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 à 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 entièrement dépendante du contenu).

Une solution potentielle que j'ai vue est trop complexe. Je me moque de IE6, tant qu'il fonctionne dans IE8, Firefox 4 et Safari 5.


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 bonne. 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.

Utilisation de 960Grids Accédez au générateur de disposition automatique et créez une conception fluide à deux colonnes. Construisez une colonne de gauche correspondant à la largeur des grilles qui fonctionne. C’est le seul défi que vous utilisez avec les grilles et 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.





two-column-layout