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

1- Créez un div wrapper, définissez le padding et la marge comme vous le souhaitez.
2- Donnez à la division de gauche la largeur dont vous avez besoin et faites-la flotter vers la gauche.
3- Définir la marge de la division de droite égale à la largeur de la division de 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 fonctionnera pour vous !

Answer 2

Il existe plusieurs façons d'y parvenir, les marges négatives étant l'une de mes préférées :

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

Bonne chance !

Answer 3

Définissez votre droite à la largeur spécifique et faites-la flotter, sur votre gauche définissez 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
}

Answer 4

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

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

Answer 5

Utilisez le simple ceci 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>