Disposition en deux colonnes avec colonne gauche et droite fixe

Question

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 qui reste.

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?

Answer 1

Les exemples suivants sont source commandé c'est à dire la colonne 1 s'affiche avant de la colonne 2 dans la source HTML. Si une colonne apparaît sur la gauche ou la droite est contrôlée par les CSS:

Fixe À Droite

#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 solution alternative est d'utiliser display: table-cell; qui résultats dans l'égalité de la hauteur des colonnes.

Answer 2

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>
 

Answer 3

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 donner à sa largeur et le centrer aussi, overflow:hidden sur la colonne sans largeur est la clé pour le contenir, verticalement, comme dans ne s'enroule pas autour des colonnes latérales (peut être à gauche ou à droite)

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

Answer 4

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/

Solution jQuery

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

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

Answer 5

J'ai été récemment montré ce site web pour des mises en page liquides à l'aide de CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (jetez un oeil à la démo pages dans les liens ci-dessous).

L'auteur fournit un exemple pour les mises en page à largeur fixe. Découvrez; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.

Cela fournit l'exemple suivant(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (pour la disposition en deux colonnes, comme vous êtes après, je pense)

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

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