Deux divs, une largeur fixe, l'autre, le reste

J'ai deux conteneurs div.

Alors que l'un doit avoir une largeur spécifique, je dois l'ajuster, de sorte que l'autre div occupe le reste de l'espace. Y a-t-il moyen de faire ça?

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

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 puis-je mettre un élément d'entrée sur la même ligne que son étiquette?

Nous sommes en 2017 et la meilleure façon de le faire est d'utiliser flexbox, qui est compatible 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>

Vous pouvez utiliser la fonction calc () de CSS.

Démo: 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 ceci vous aidera!!

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 votre ordre actuel du code source et votre 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, la .leftdiv obtient une largeur est implicitement du top, leftet des rightstyles qui lui permet de remplir l'espace restant dans#container .

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

Si vous pouvez les envelopper dans un conteneur, <div>vous pouvez utiliser le positionnement pour <div>ancrer la gauche left:0;right:250px, voir cette démo . Je vais dire maintenant que cela ne fonctionnera pas dans IE6 car un seul coin de a <div>peut être positionné de manière absolue sur une page ( voir ici pour une explication complète).

1- Ayez un div d'emballage, réglez le rembourrage et la marge comme vous le souhaitez
2- Faites le côté gauche de la largeur dont vous avez besoin et faites-le flotter à gauche
3- Réglez la marge de div côté droit égale à la largeur du côté gauche

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

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

</div>

J'espère que cela fonctionne pour toi!

Il y a plusieurs façons d'accomplir, les marges négatives sont l'une de mes préférées:

http://www.alistapart.com/articles/negativemargins/

Bonne chance!

réglez votre droite à la largeur spécifique et faites-la flotter, sur votre gauche, réglez simplement la marge droite à 250px

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

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

Si vous avez besoin d'une solution multi-navigateurs, vous pouvez utiliser mon approche, claire et simple.

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

Utilisez le simple cela peut vous aider

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>