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

Mon exigence est simple: 2 colonnes où la bonne a une taille fixe . Malheureusement, je n'ai pas trouvé de solution fonctionnelle, ni sur stackoverflow ni sur Google. Chaque solution qui y est décrite échoue si je l'implémente dans mon propre contexte. La solution actuelle est:

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

S'il vous plaît donnez votre avis. Merci beaucoup!

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 droite a un float (et une largeur), et si la colonne de gauche n'a pas de largeur et pas de float, elle sera flexible :)

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

Enfin, dans la colonne de gauche, ajoutez un width: autoet overflow: hidden, cela rend la colonne de gauche indépendante de la colonne de droite (par exemple, si vous avez redimensionné la fenêtre du navigateur et que la colonne de droite a touché celle de gauche, sans ces propriétés, la colonne de gauche fonctionnerait autour de la droite, avec ces propriétés il 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/

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

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

Il est préférable d'éviter de placer la colonne de droite avant la gauche, utilisez simplement une marge droite négative.

Et soyez «réactif» en incluant un paramètre @media pour que la colonne de droite tombe sous la 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>

Solution la plus simple et la plus flexible à ce jour à utiliser table display:

HTML, le div de gauche vient en premier, le div de droite vient en second ... nous lisons et écrivons de gauche à droite, donc cela n'a aucun sens de placer les divs de droite à gauche

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

CSS:

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}​​

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

Exemples de cas:

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

Je voudrais suggérer une solution encore non mentionnée: utilisez CSS3 calc()pour mélanger %et pxunités. calc()a un excellent support nos jours, et il permet la construction rapide de mises en page assez complexes.

Voici un lien JSFiddle pour le code ci-dessous.

HTML:

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

CSS:

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

Et voici un autre JSFiddle démontrant ce concept appliqué à une mise en page plus complexe. J'ai utilisé SCSS ici car ses variables permettent un code flexible et auto-descriptif, mais la mise en page peut être facilement recréée en CSS pur si le fait d'avoir des valeurs "codées en dur" n'est pas un problème.

Il s'agit d'une solution générique commandée à la source HTML où:

• La première colonne dans l'ordre source est fluide
• La deuxième colonne dans l'ordre source est fixe
  • Cette colonne peut être flottante à gauche ou à droite en utilisant CSS

Colonne fixe / deuxième à droite

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#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>

Colonne fixe / deuxième à gauche

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#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 donne des colonnes de hauteur égale.

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

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

placez un div transparent sous le récipient gauche et droit.

Je l'ai simplifié: j'ai édité la réponse de Jackjoe. La hauteur auto etc pas obligatoire 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>