Dwa elementy div, jeden o stałej szerokości, drugi, reszta

Mam dwa kontenery div.

Chociaż jeden musi mieć określoną szerokość, muszę go dostosować, aby drugi element div zajmował resztę miejsca. Czy jest jakiś sposób, żebym mógł to zrobić?

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

Zobacz: http://jsfiddle.net/SpSjL/ (dostosuj szerokość przeglądarki)

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

Możesz to również zrobić display: table, co zwykle jest lepszym podejściem: Jak umieścić element wejściowy w tym samym wierszu, co jego etykieta?

Jest rok 2017 i najlepszym sposobem na to jest użycie flexboksa, który jest kompatybilny z 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>

Możesz użyć funkcji calc () w CSS.

Demo: 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;   
}

Mam nadzieję, że to ci pomoże !!

Jeśli możesz odwrócić kolejność w kodzie źródłowym, możesz to zrobić w ten sposób:

HTML:

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

CSS:

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

Przykład: http://jsfiddle.net/blineberry/VHcPT/

Dodaj kontener i możesz to zrobić z aktualną kolejnością kodu źródłowego i pozycjonowaniem bezwzględnym:

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

Tutaj .leftdiv pobiera domyślnie ustawioną szerokość od top, lefti rightstylów, które pozwala na to, aby wypełnić pozostałą przestrzeń w #container.

Przykład: http://jsfiddle.net/blineberry/VHcPT/3/

Jeśli możesz zawinąć je w kontener, <div>możesz użyć pozycjonowania, aby <div>zakotwiczyć lewą stronę left:0;right:250px, zobacz to demo . Powiem teraz, że to nie będzie działać w IE6 jak tylko jeden narożnik <div>może być całkowicie umieszczony na stronie ( patrz tutaj dla pełnego wyjaśnienia).

1 - Przygotuj element div wrapper, ustaw dopełnienie i margines tak, jak chcesz
2 - Ustaw lewą stronę div o wymaganej szerokości i
ustaw ją tak, by pływała po lewej stronie 3 - Ustaw margines div po prawej stronie równy szerokości lewej strony

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

Mam nadzieję, że to działa dla Ciebie!

Można to osiągnąć na kilka sposobów, ujemne marże są jednym z moich ulubionych:

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

Powodzenia!

ustaw swoją prawą na określoną szerokość i przesuń ją, po lewej ustaw tylko margines prawy na 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
}

Jeśli potrzebujesz rozwiązania obejmującego wiele przeglądarek, możesz skorzystać z mojego podejścia, przejrzystego i łatwego.

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

Użyj prostego, który może ci pomóc

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