Dua div, satu lebar tetap, yang lain, sisanya

Saya punya dua wadah div.

Sementara salah satu harus memiliki lebar tertentu, saya perlu menyesuaikannya, sehingga div lainnya mengambil sisa ruang. Apakah ada cara agar saya bisa melakukan ini?

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

Lihat: http://jsfiddle.net/SpSjL/ (sesuaikan lebar browser)

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

Anda juga dapat melakukannya dengan display: table, yang biasanya merupakan pendekatan yang lebih baik: Bagaimana saya dapat meletakkan elemen masukan pada baris yang sama dengan labelnya?

Ini tahun 2017 dan cara terbaik untuk melakukannya adalah dengan menggunakan flexbox, yang kompatibel dengan 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>

Anda dapat menggunakan Fungsi calc () dari 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;   
}

Semoga ini bisa membantu Anda !!

Jika Anda dapat membalik urutan di kode sumber, Anda dapat melakukannya seperti ini:

HTML:

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

CSS:

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

Contoh: http://jsfiddle.net/blineberry/VHcPT/

Tambahkan penampung dan Anda dapat melakukannya dengan urutan kode sumber Anda saat ini dan pemosisian absolut:

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

Di sini, .leftdiv mendapat lebar implisit diatur dari top, left, dan rightgaya yang memungkinkan untuk mengisi ruang yang tersisa di #container.

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

Jika Anda dapat membungkusnya dalam wadah, <div>Anda dapat menggunakan pemosisian untuk membuat <div>jangkar kiri left:0;right:250px, lihat demo ini . Sekarang saya akan mengatakan bahwa ini tidak akan berfungsi di IE6 karena hanya satu sudut dari a yang <div>dapat diposisikan secara mutlak pada halaman ( lihat di sini untuk penjelasan lengkap).

1- Memiliki div pembungkus, atur padding dan margin sesuka Anda
2- Jadikan div sisi kiri lebar yang Anda butuhkan dan buat itu mengambang ke kiri
3- Atur margin div sisi kanan sama dengan lebar sisi kiri

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

Semoga ini berhasil untuk Anda!

Ada beberapa cara untuk melakukannya, margin negatif adalah salah satu favorit saya:

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

Semoga berhasil!

atur hak Anda ke lebar tertentu dan letakkan, di kiri Anda atur margin-right menjadi 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
}

Jika Anda membutuhkan solusi lintas browser, Anda dapat menggunakan pendekatan saya, jelas dan mudah.

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

Gunakan yang sederhana ini dapat membantu Anda

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