Disposition div à 2 colonnes : colonne de droite à largeur fixe, colonne de gauche fluide.

Question

Mon besoin est simple : 2 colonnes dont celle de droite a une taille fixe . Malheureusement, je n'ai pas trouvé de solution qui fonctionne, ni sur stackoverflow ni sur Google. Chaque solution décrite là-bas échoue si je la mets en œuvre dans mon propre contexte. La solution actuelle est la suivante :

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

J'obtiens ce qui suit avec le code ci-dessus :

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

Veuillez me conseiller. Merci beaucoup !

Answer 1

Retirez le flotteur de la colonne de gauche.

Au niveau du code HTML, la colonne de droite doit venir avant celle de gauche.

Si la colonne de droite a un flotteur (et une largeur), et si la colonne de gauche n'a pas de largeur et pas de flotteur, elle sera flexible :)

Appliquez également un overflow: hidden et une certaine hauteur (qui peut être automatique) à la div externe, de sorte qu'elle entoure les deux div internes.

Enfin, dans la colonne de gauche, ajoutez un width: auto y overflow: hidden Ceci rend la colonne de gauche indépendante de la colonne de droite (par exemple, si vous redimensionnez la fenêtre du navigateur et que la colonne de droite touche la colonne de gauche, sans ces propriétés, la colonne de gauche tournerait autour de la colonne de droite, avec ces propriétés, elle reste dans son espace).

Exemple HTML :

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS :

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

Exemple ici : http://jsfiddle.net/jackJoe/fxWg7/

Answer 2

Voir http://www.alistapart.com/articles/negativemargins/ c'est exactement ce dont vous avez besoin ( exemple 4 là).

Answer 3

Pour éviter de placer la colonne de droite avant celle de gauche, il suffit d'utiliser une marge de droite négative.

Et soyez "réactif" en incluant un paramètre @media pour que la colonne de droite passe sous celle de gauche sur les écrans étroits.

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

Answer 4

Ce que vous pouvez faire, c'est appliquer une largeur fixe aux deux conteneurs, puis utiliser une autre classe div où clear:both, comme suit

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

placez un div clair sous les conteneurs gauche et droit.

Answer 5

Je l'ai simplifié : j'ai édité la réponse de jackjoe. La hauteur auto etc n'est pas nécessaire je pense.

CSS :

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

HTML :

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>