Bagaimana cara membuat div mengisi ruang horisontal yang tersisa?

Saya memiliki 2 div: satu di sisi kiri dan satu di sisi kanan halaman saya. Yang di sisi kiri memiliki lebar tetap dan saya ingin yang di sebelah kanan mengisi ruang yang tersisa.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Ini sepertinya untuk mencapai apa yang Anda inginkan.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

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

Masalah yang saya temukan dengan jawaban Boushley adalah bahwa jika kolom kanan lebih panjang dari kiri itu hanya akan membungkus kiri dan melanjutkan mengisi seluruh ruang. Ini bukan perilaku yang saya cari. Setelah mencari melalui banyak 'solusi' saya menemukan tutorial (sekarang tautan sudah mati) untuk membuat tiga halaman kolom.

Penulis menawarkan tiga cara berbeda, satu lebar tetap, satu dengan tiga kolom variabel dan satu dengan kolom luar tetap dan tengah lebar variabel. Jauh lebih elegan dan efektif daripada contoh lain yang saya temukan. Secara signifikan meningkatkan pemahaman saya tentang tata letak CSS.

Pada dasarnya, dalam kasus sederhana di atas, mengambang kolom pertama ke kiri dan beri lebar tetap. Lalu beri kolom di sebelah kanan margin kiri yang sedikit lebih lebar dari kolom pertama. Itu dia. Selesai Kode Ala Boushley:

Berikut ini demo di Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

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

Dengan contoh Boushley kolom kiri memegang kolom lainnya di sebelah kanan. Begitu kolom kiri berakhir, kanan mulai mengisi seluruh ruang lagi. Di sini kolom kanan hanya menyelaraskan lebih jauh ke dalam halaman dan kolom kiri menempati margin lemak yang besar. Tidak diperlukan interaksi aliran.

Solusinya datang dari properti tampilan.

Pada dasarnya Anda perlu membuat dua divs bertindak seperti sel tabel. Jadi, alih-alih menggunakan float:left, Anda harus menggunakan display:table-celldi kedua divs, dan untuk div lebar dinamis Anda perlu mengatur width:auto;juga. Kedua div harus ditempatkan dalam wadah 100% lebar dengan display:tableproperti.

Inilah css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Dan HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

PENTING: Untuk Internet Explorer Anda perlu menentukan properti float pada div lebar dinamis, jika tidak ruang tidak akan terisi.

Saya harap ini akan menyelesaikan masalah Anda. Jika mau, Anda dapat membaca artikel lengkap yang saya tulis tentang ini di blog saya .

Saat ini, Anda harus menggunakan flexboxmetode ini (dapat disesuaikan dengan semua browser dengan awalan browser).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Info lebih lanjut: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Karena ini adalah pertanyaan yang agak populer, saya cenderung berbagi solusi yang bagus menggunakan BFC.
Contoh codepen berikut di sini .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

Dalam hal ini, overflow: automemicu perilaku konteks dan membuat elemen yang tepat berkembang hanya ke lebar yang tersedia dan secara alami akan berkembang menjadi lebar penuh jika .leftmenghilang. Trik yang sangat berguna dan bersih untuk banyak tata letak UI, tetapi mungkin sulit untuk memahami "mengapa ia bekerja" pada awalnya.

Jika Anda tidak memerlukan kompatibilitas dengan versi browser tertentu (misalnya IE 10 8 atau kurang), Anda dapat menggunakan calc()fungsi CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

Jawaban @ Boushley adalah yang terdekat, namun ada satu masalah yang tidak diatasi yang telah ditunjukkan. The kanan div mengambil seluruh lebar browser; konten mengambil lebar yang diharapkan. Untuk melihat masalah ini dengan lebih baik:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Konten berada di tempat yang benar (di Firefox), namun lebarnya salah. Ketika elemen anak mulai mewarisi lebar (misalnya tabel dengan width: 100%) mereka diberi lebar sama dengan browser yang menyebabkan mereka meluap dari kanan halaman dan membuat bilah gulir horizontal (di Firefox) atau tidak melayang dan didorong ke bawah ( dalam chrome).

Anda dapat memperbaiki ini dengan mudah dengan menambahkan overflow: hiddenke kolom kanan. Ini memberi Anda lebar yang benar untuk konten dan div. Selanjutnya, tabel akan menerima lebar yang benar dan mengisi lebar yang tersisa tersedia.

Saya mencoba beberapa solusi lain di atas, mereka tidak bekerja sepenuhnya dengan kasus tepi tertentu dan terlalu berbelit-belit untuk menjamin memperbaikinya. Ini berfungsi dan sederhana.

Jika ada masalah atau masalah, jangan ragu untuk melaporkannya.

Berikut adalah sedikit perbaikan untuk solusi yang diterima, yang mencegah kolom kanan jatuh di bawah kolom kiri. Diganti width: 100%;dengan overflow: hidden;solusi yang rumit, jika seseorang tidak mengetahuinya.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[Sunting] Juga periksa contoh untuk tata letak tiga kolom: http://jsfiddle.net/MHeqG/3148/

Jika Anda mencoba mengisi ruang yang tersisa di dalam kotak fleksibel antara 2 item, tambahkan kelas berikut ke div kosong di antara 2 item yang ingin Anda pisahkan:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

Menggunakan display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

Jawaban Boushley tampaknya menjadi cara terbaik untuk mengatur agar menggunakan pelampung ini. Namun, ini bukan tanpa masalah. Apung bersarang di dalam elemen yang diperluas tidak akan tersedia untuk Anda; itu akan merusak halaman.

Metode yang ditampilkan pada dasarnya "palsu" ketika datang ke elemen ekspansi - itu tidak benar-benar mengambang, itu hanya bermain bersama dengan elemen mengambang lebar tetap menggunakan marginnya.

Masalahnya kemudian adalah bahwa: elemen yang mengembang tidak melayang. Jika Anda mencoba dan memiliki nested mengapung di dalam elemen ekspansi, item melayang "bersarang" itu tidak benar-benar bersarang sama sekali; ketika Anda mencoba untuk menempel di clear: both;bawah item mengambang "bersarang" Anda, Anda akan berakhir membersihkan float tingkat atas juga.

Kemudian, untuk menggunakan solusi Boushley, saya ingin menambahkan bahwa Anda harus meletakkan div seperti berikut: .fakeFloat {height: 100%; lebar: 100%; mengapung: kiri; } dan letakkan ini langsung di dalam div yang diperluas; semua konten div yang diperluas harus masuk ke dalam elemen FakeFloat ini.

Untuk alasan ini, saya akan merekomendasikan menggunakan tabel dalam kasus khusus ini. Elemen apung sebenarnya tidak dirancang untuk melakukan ekspansi yang Anda inginkan, sedangkan solusi menggunakan tabel sepele. Argumen umumnya dibuat bahwa mengambang lebih tepat untuk tata letak, bukan tabel .. tetapi Anda tidak menggunakan mengambang di sini, Anda berpura-pura - dan semacam itu mengalahkan tujuan dari argumen gaya untuk kasus khusus ini, di pendapat saya yang sederhana.

Saya mencoba solusi di atas untuk cairan kiri, dan hak tetap tetapi tidak ada yang bekerja (saya tahu pertanyaannya adalah sebaliknya tetapi saya pikir ini relevan). Inilah yang berhasil:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

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

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

Saya punya masalah serupa dan saya menemukan solusinya di sini: https://stackoverflow.com/a/16909141/3934886

Solusinya adalah untuk div pusat tetap dan kolom sisi cair.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Jika Anda menginginkan kolom kiri yang diperbaiki, cukup ubah rumusnya.

Anda dapat menggunakan properti Grid CSS, adalah struktur cara yang paling jelas, bersih dan intuitif kotak Anda.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}

<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

Saya ingin tahu bahwa tidak ada yang terbiasa position: absolutedenganposition: relative

Jadi, solusi lain adalah:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Contoh jsfiddle

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

Saya punya solusi yang sangat sederhana untuk ini! // HTML

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

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Tautan: http://jsfiddle.net/MHeqG/

Saya memiliki masalah yang sama dan muncul dengan yang berikut ini yang bekerja dengan baik

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

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

Metode ini tidak akan membungkus ketika jendela menyusut tetapi akan secara otomatis memperluas area 'konten'. Ini akan menjaga lebar statis untuk menu situs (kiri).

Dan untuk demo kotak konten yang diperluas secara otomatis dan kotak vertikal kiri (menu situs):

https://jsfiddle.net/tidan/332a6qte/

Coba tambahkan posisi relative, hapus widthdan floatproperti di sisi kanan, lalu tambah leftdan rightproperti dengan 0nilai.

Anda juga dapat menambahkan margin leftaturan dengan nilai didasarkan pada lebar elemen kiri (+ beberapa piksel jika Anda memerlukan ruang di antaranya) untuk mempertahankan posisinya.

Contoh ini berfungsi untuk saya:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Coba ini. Ini berhasil untuk saya.

Saya telah mengerjakan masalah ini selama dua hari dan memiliki solusi yang dapat bekerja untuk Anda dan siapa pun yang mencoba membuat lebar Tetap responsif ke kiri dan sisi kanan mengisi sisa layar tanpa membungkus sisi kiri. Tujuan yang saya asumsikan adalah membuat halaman responsif di browser maupun perangkat seluler.

Ini Kodenya

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Ini biola saya yang mungkin bekerja untuk Anda seperti yang terjadi pada saya. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Aturan untuk barang dan wadah;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Gunakan ruang putih: nowrap; untuk teks dalam item terakhir untuk restrukturisasi mereka.

Item X% | Butir Y% | Barang Z%

Total panjang selalu = 100%!

jika

Item X=50%
Item Y=10%
Item z=20%

kemudian

Item X = 70%

Item X dominan (item pertama dominan dalam tata letak CSS tabel)!

Coba maks-konten; properti untuk div di dalam untuk menyebarkan div dalam wadah:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

Solusi termudah adalah menggunakan margin. Ini juga akan responsif!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

Solusi paling sederhana adalah dengan membuat lebar div kiri sama dengan 100% - lebar div kanan ditambah margin di antara mereka.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

Saya mengalami masalah yang sama mencoba tata letak beberapa kontrol jqueryUI . Meskipun filosofi umum sekarang adalah "menggunakan DIVbukan TABLE", saya menemukan dalam kasus saya menggunakan TABEL bekerja lebih baik. Khususnya, jika Anda perlu memiliki penyelarasan langsung dalam dua elemen (misalnya, pemusatan vertikal, pemusatan horizontal, dll.) Opsi yang tersedia dengan TABEL memberikan kontrol intuitif yang sederhana untuk ini.

Inilah solusi saya:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>