Bir div kalan yatay alanı nasıl doldurur?

2 bölümüm var: biri sayfamın sol tarafında, diğeri sağ tarafında. Sol taraftaki genişlik sabittir ve sağ taraftaki boşluğun kalan alanı doldurmasını istiyorum.

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

Bu, ne istediğinizi başarıyor gibi görünüyor.

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

Boushley'nin cevabı ile bulduğum sorun, sağ sütun soldan daha uzunsa, sadece solun etrafına sarılıp tüm alanı doldurmaya devam edeceği. Aradığım davranış bu değil. Çok sayıda 'çözüm' araması yaptıktan sonra üç sütun sayfası oluşturma konusunda bir öğretici buldum (şimdi bağlantı öldü).

Yazar, biri sabit genişlik, biri üç değişken sütun ve biri sabit dış sütun ve değişken genişlik orta olmak üzere üç farklı yol sunmaktadır. Bulduğum diğer örneklerden çok daha zarif ve etkili. CSS mizanpajı konusundaki anlayışımı önemli ölçüde geliştirdi.

Temel olarak, yukarıdaki basit durumda, ilk sütunu sola kaydırın ve sabit bir genişlik verin. Ardından sağdaki sütuna, ilk sütundan biraz daha geniş bir sol kenar boşluğu verin. Bu kadar. Bitti. Ala Boushley'nin kodu:

İşte Stack Snippets & jsFiddle'da bir demo

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

Boushley'in örneğinde, sol sütun diğer sütunu sağda tutar. Sol sütun biter bitmez sağ boşluk tekrar doldurmaya başlar. Burada sağ sütun sadece sayfaya daha fazla uyum sağlar ve sol sütun büyük yağ marjını işgal eder. Akış etkileşimi gerekmez.

Çözüm display özelliğinden gelir.

Temel olarak iki divin tablo hücreleri gibi davranmasını sağlamanız gerekir. Bu nedenle, kullanmak yerine, her iki div'de de float:leftkullanmanız display:table-cellgerekir ve dinamik genişlik div için de ayarlamanız gerekir width:auto;. Her iki div de display:tableözelliği olan% 100 genişlikte bir kaba yerleştirilmelidir .

İşte 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;}

Ve HTML:

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

ÖNEMLİ: Internet Explorer için dinamik genişlik div'de float özelliğini belirtmeniz gerekir, aksi takdirde boşluk doldurulmaz.

Umarım bu sorununuzu çözecektir. Eğer isterseniz, ben bu konuda yazdığı makalenin tamamını okuyabilir bloguma .

Bu günlerde, flexboxyöntemi kullanmalısınız (tarayıcı öneki olan tüm tarayıcılara uyarlanabilir).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Daha fazla bilgi: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bu oldukça popüler bir soru olduğundan, BFC kullanarak güzel bir çözüm paylaşmaya meyilliyim.
Aşağıdakilerden Codepen örnek burada .

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

Bu durumda, overflow: autobağlam davranışını tetikler ve sağ öğeyi yalnızca kullanılabilir kalan genişliğe genişletir ve .leftkaybolursa doğal olarak tam genişliğe genişler . Birçok kullanıcı arayüzü düzeni için son derece yararlı ve temiz bir numara, ancak belki de ilk başta "neden işe yaradığını" anlamak zor.

Belirli tarayıcıların eski sürümleriyle uyumluluğa ihtiyacınız yoksa ( örneğin IE 10 8 veya daha azı) calc()CSS işlevini kullanabilirsiniz :

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

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

@ Boushley'in cevabı en yakın olanıydı, ancak belirtilmeyen bir sorun var. Sağ div tarayıcısının tüm genişliğini alır; içerik beklenen genişliği alır. Bu sorunu daha iyi görmek için:

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

İçerik doğru yerde (Firefox'ta), ancak genişlik yanlış. Alt öğeler genişliği devralmaya başladığında (ör.width: 100% ), tarayıcının genişliğine eşit bir genişlik verilir, bu da sayfanın sağından taşmasına ve yatay bir kaydırma çubuğu (Firefox'ta) oluşturmasına veya yüzülmemesine ve aşağı itilmesine ( krom).

Sen edebilirsiniz Bunu düzeltmek ekleyerek kolaycaoverflow: hidden sağ sütuna. Bu, hem içerik hem de div için doğru genişliği sağlar. Ayrıca, tablo doğru genişliği alacak ve kullanılabilir kalan genişliği dolduracaktır.

Yukarıdaki diğer çözümlerden bazılarını denedim, belirli kenar durumlarıyla tam olarak çalışmadılar ve bunları düzeltmek için çok kıvrıldılar. Bu işe yarıyor ve basit.

Herhangi bir sorun veya endişeniz varsa, bunları gündeme getirmekten çekinmeyin.

Burada, sağ sütunun sol sütunun altına düşmesini önleyen kabul edilen çözüm için küçük bir düzeltme verilmiştir. Değiştirilen width: 100%;ile overflow: hidden;birileri bunu bilmiyorsan, zor bir çözümdür.

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

Üç sütun düzeni için bir örneği de kontrol edin: http://jsfiddle.net/MHeqG/3148/

Bir flexbox'ta 2 öğe arasında kalan alanı doldurmaya çalışıyorsanız, ayırmak istediğiniz 2 arasındaki boş bir div öğesine aşağıdaki sınıfı ekleyin:

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

kullanım 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>

Boushley'in cevabı, şamandıraları kullanarak bunu düzenlemenin en iyi yolu gibi görünüyor. Ancak, sorunları olmadan değil. Genişletilmiş öğenin içindeki iç içe kayan reklamlar sizin için kullanılamaz; sayfayı kıracaktır.

Gösterilen yöntem, genişleyen öğeye gelince temelde "taklit eder" - aslında yüzer değil, sadece kenar boşluklarını kullanarak sabit genişlikteki yüzer öğelerle birlikte oynar.

O zaman sorun tam olarak budur: genişleyen eleman kayan değil. Genişleyen öğenin içinde herhangi bir iç içe kayan reklam denerseniz ve bu "iç içe" kayan öğeler gerçekten iç içe değildir; yapıştırmaya çalıştığınızdaclear: both;"iç içe" kayan öğelerinizin altına , üst düzey şamandıraları da temizleyeceksiniz.

Ardından, Boushley'in çözümünü kullanmak için, aşağıdakine benzer bir div yerleştirmeniz gerektiğini eklemek isterim: .fakeFloat {height: 100%; genişlik:% 100; şamandıra: sol; } ve bunu doğrudan genişletilmiş div içine yerleştirin; tüm genişletilmiş div içeriği daha sonra bu fakeFloat öğesi içinde olmalıdır.

Bu nedenle, bu özel durumda tabloların kullanılmasını öneriyorum. Kayan öğeler gerçekten istediğiniz genişletmeyi yapmak için tasarlanmamıştır, oysa tablo kullanan çözüm önemsizdir. Genellikle yüzmenin tablolar için değil, mizanpajlar için daha uygun olduğu iddia edilir .. ancak yine de burada yüzmeyi kullanmıyorsunuz, taklit ediyorsunuz - ve bu tür bir durum için stilistik argümanın amacını yeniyor, alçakgönüllü görüşüm.

Bir sıvı sol için yukarıdaki çözümleri denedim ve sabit bir sağ ama bunların hiçbiri işe yaramadı (sorunun tersi olduğunun farkındayım ama bunun önemli olduğunu düşünüyorum). İşte işe yarayan:

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

Benzer bir sorunum vardı ve çözümü burada buldum: https://stackoverflow.com/a/16909141/3934886

Çözelti, sabit bir orta bölme ve sıvı yan sütunları içindir.

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

Sabit bir sol sütun istiyorsanız, formülü uygun şekilde değiştirmeniz yeterlidir.

Grid CSS özelliklerini kullanabilirsiniz, kutularınızı yapılandırmanın en net, temiz ve sezgisel yoludur.

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

Hiç kimse kullanılan merak position: absoluteileposition: relative

Yani, başka bir çözüm:

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

JSFiddle örneği

/ * * 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>

Bunun için çok basit bir çözümüm var! // 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;}

Bağlantı: http://jsfiddle.net/MHeqG/

Ben de benzer bir sorun vardı ve iyi çalıştı aşağıdaki ile geldi

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>

Bu yöntem pencere küçüldüğünde sarılmaz, ancak 'içerik' alanını otomatik olarak genişletir. Site menüsü için statik bir genişlik tutacaktır (solda).

Ve otomatik genişleyen içerik kutusu ve sol dikey kutu (site menüsü) demosu için:

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

Pozisyon eklemeyi deneyin relative, kaldır widthve floatsağ taraftan özelliklerini daha sonra ekleme leftve rightmülk 0değeri.

Ayrıca, margin leftdeğerin sol öğenin genişliğine dayandığı kural ekleyebilirsiniz (+ arada boşluk gerekiyorsa bazı pikseller) konumunu korumak .

Bu örnek benim için çalışıyor:

   #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

Bunu dene. Benim için çalıştı.

Bu sorun üzerinde iki gündür çalışıyorum ve siz ve duyarlı bir Sabit genişlik sola yapmaya çalışan herkes için çalışabilecek bir çözümüm var ve sol tarafa sarmadan ekranın geri kalanını sağ tarafa dolduruyor. Tahmin ettiğim amaç, sayfayı hem tarayıcılarda hem de mobil cihazlarda duyarlı hale getirmektir.

Kod İşte

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

İşte benim için olduğu gibi sizin için çalışabilecek kemanım. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Eşya ve kaplar için kurallar;

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

Beyaz boşluk kullanın : nowrap; yıkımları için son maddelerdeki metinler için.

Öğe X% | Eşya Y% | Öğe Z%

Toplam uzunluk her zaman =% 100!

Eğer

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

sonra

Madde X =% 70

X maddesi baskındır (ilk maddeler tablo CSS mizanpajında ​​baskındır)!

Maksimum içeriği deneyin ; div içinde konteyner yaymak için div özelliği:

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

}

En kolay çözüm marj kullanmaktır. Bu da duyarlı olacak!

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

En basit çözüm, sol div genişliğini% 100'e eşit yapmaktır - sağ div'in genişliği artı aralarındaki herhangi bir kenar boşluğu.

<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

Bazı jqueryUI denetimlerini düzenlemeye çalışırken bu aynı sorunla karşılaştım . Her ne kadar ortak felsefe " DIVyerine kullanmak" olsa da TABLE, benim durumumda TABLE kullanmanın daha iyi çalıştığını gördüm. Özellikle, iki eleman (örn. Dikey merkezleme, yatay merkezleme, vb.) İçinde doğrudan hizalama yapmanız gerekiyorsa, TABLO ile kullanılabilen seçenekler bunun için basit, sezgisel kontroller sağlar.

İşte benim çözümüm:

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