web-dev-qa-db-fra.com

Disposition en deux colonnes avec colonne gauche et droite fixe

Je veux créer une mise en page à deux colonnes à l'aide de DIV, la colonne de droite ayant une largeur fixe de 200 pixels et la colonne de gauche occupant tout l'espace restant.

C'est assez facile, si vous utilisez des tableaux:

<table width="100%">
  <tr>
    <td>Column 1</td>
    <td width="200">Column 2 (always 200px)</td>
  </tr>
</table>

Mais qu'en est-il des DIV? Est-il possible d'accomplir cela? Si oui, alors comment?

htmlcssfluid-layout
50
Silver Light

Les exemples suivants sont classés par ordre de source, c'est-à-dire que la colonne 1 apparaît avant la colonne 2 dans la source HTML. Qu'une colonne apparaisse à gauche ou à droite est contrôlée par CSS:

Droit fixe 

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}
<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Fixe à gauche 

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}
<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Une autre solution consiste à utiliser display: table-cell ; ce qui entraîne des colonnes d'égale hauteur.

88
Salman A

Voici une solution (et il y a quelques bizarreries, mais laissez-moi savoir si vous les remarquez et qu'elles posent problème):

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>
12
leetNightshade

CSS:

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

HTML:

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

Ce qui précède devrait fonctionner, vous pouvez mettre ce code dans un wrapper si vous voulez lui donner la largeur et le centrer aussi, overflow:hidden sur la colonne sans largeur est la clé pour la contenir, verticalement, comme pour ne pas entourer les colonnes latérales (peut être à gauche ou à droite)

IE6 pourrait besoin zoom:1 défini sur la div #content aussi si vous avez besoin de son soutien

6
clairesuzy

CSS Solutuion 

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

Consultez l'exemple de travail sur http://jsfiddle.net/NP4vb/3/

jQuery Solution 

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

Vérifiez l'exemple de travail http://jsfiddle.net/NP4vb/

5
Hussein

On m'a récemment montré ce site Web pour les mises en page liquides utilisant CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (jetez un coup d'œil aux pages de démonstration dans les liens ci-dessous).

L'auteur fournit maintenant un exemple de disposition à largeur fixe. Check-out; http://matthewjamestaylor.com/blog/how-to-convert-a-lliquid-layout-to-fixed-width .

Ceci fournit le ou les exemples suivants, http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (pour une disposition en deux colonnes, comme vous le souhaitez après )

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (pour une mise en page à trois colonnes).

Désolé pour tant de liens vers ce site de gars, mais je pense que c'est une ressource IMPRESSIONNANTE.

1
Mr Moose

Je pense que c'est une réponse simple, cela divisera les devs enfants à 50% chacun en fonction de la largeur du parent.

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>
1
Anju313