Deux divs, l'un à largeur fixe, l'autre, le reste

Question

J'ai deux conteneurs div.

Alors que l'une d'entre elles doit avoir une largeur spécifique, je dois l'ajuster pour que l'autre div occupe le reste de l'espace. Existe-t-il un moyen de le faire ?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Answer 1

Voir : http://jsfiddle.net/SpSjL/ (ajustez la largeur du navigateur)

HTML :

<div class="right"></div>
<div class="left"></div>

CSS :

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

Vous pouvez également le faire avec display: table ce qui est généralement une meilleure approche : Comment placer un élément de saisie sur la même ligne que son étiquette ?

Answer 2

Nous sommes en 2017 et la meilleure façon de le faire est d'utiliser le flexbox, qui est Compatible avec IE10+. .

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

Answer 3

Vous pouvez utiliser la fonction calc() de CSS.

Démonstration : http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

J'espère que cela vous aidera !

Answer 4

Si vous pouvez inverser l'ordre dans le code source, vous pouvez le faire comme ceci :

HTML :

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS :

.right {
  width: 250px;
  float: right;
}   

Un exemple : http://jsfiddle.net/blineberry/VHcPT/

Ajoutez un conteneur et vous pouvez le faire avec l'ordre de votre code source actuel et le positionnement absolu :

HTML :

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS :

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Ici, le .left obtient une largeur implicitement définie à partir de la balise top , left et right qui lui permettent de remplir l'espace restant dans les #container .

Exemple : http://jsfiddle.net/blineberry/VHcPT/3/

Answer 5

Si vous pouvez les emballer dans un récipient <div> vous pourriez utiliser le positionnement pour que la gauche <div> ancré à left:0;right:250px voir cette démo . Je précise d'ores et déjà que cela ne fonctionnera pas dans IE6, car seul un coin d'une page d'accueil de l'Internet est utilisé. <div> peuvent être positionnés de manière absolue sur une page ( voir ici pour une explication complète).