Jak sprawić, by div wypełnił pozostałą przestrzeń poziomą?

Mam 2 div: jeden po lewej stronie i jeden po prawej stronie mojej strony. Ten po lewej stronie ma stałą szerokość i chcę, aby ten po prawej stronie wypełniał pozostałą przestrzeń.

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

To wydaje się osiągać to, do czego dążysz.

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

Problem, który znalazłem z odpowiedzią Boushleya, polega na tym, że jeśli prawa kolumna jest dłuższa niż lewa, po prostu owinie się wokół lewej i wznowi wypełnianie całej przestrzeni. Nie takiego zachowania szukałem. Po przeszukaniu wielu „rozwiązań” znalazłem samouczek (teraz link nie działa) na temat tworzenia trzech kolumn.

Autor oferuje trzy różne sposoby, jeden ze stałą szerokością, jeden z trzema zmiennymi kolumnami i jeden ze stałymi kolumnami zewnętrznymi i środkową o zmiennej szerokości. O wiele bardziej elegancki i skuteczny niż inne przykłady, które znalazłem. Znacząco poprawiło moje zrozumienie układu CSS.

Zasadniczo, w prostym przypadku powyżej, przestaw pierwszą kolumnę w lewo i nadaj jej stałą szerokość. Następnie nadaj kolumnie po prawej lewy margines, który jest nieco szerszy niż pierwsza kolumna. Otóż ​​to. Gotowy. Kod Ala Boushleya:

Oto demo w 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>

Na przykładzie Boushleya lewa kolumna trzyma drugą kolumnę po prawej. Jak tylko lewa kolumna się skończy, prawa znów zaczyna wypełniać całą przestrzeń. Tutaj prawa kolumna po prostu wyrównuje się głębiej na stronie, a lewa kolumna zajmuje duży margines tłuszczu. Nie są wymagane interakcje przepływowe.

Rozwiązanie pochodzi z właściwości display.

Zasadniczo musisz sprawić, aby dwa div działały jak komórki tabeli. Zamiast używać float:left, musisz użyć display:table-cellobu div, a dla dynamicznej szerokości div musisz width:auto;także ustawić . Oba elementy div należy umieścić w pojemniku o szerokości 100% z display:tablewłaściwością.

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

I HTML:

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

WAŻNE: W przypadku przeglądarki Internet Explorer musisz określić właściwość float na dynamicznej szerokości div, w przeciwnym razie miejsce nie zostanie wypełnione.

Mam nadzieję, że to rozwiąże twój problem. Jeśli chcesz, możesz przeczytać pełny artykuł, który o tym napisałem na moim blogu .

W dzisiejszych czasach powinieneś skorzystać z flexboxmetody (może być dostosowany do wszystkich przeglądarek z prefiksem przeglądarki).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Więcej informacji: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ponieważ jest to dość popularne pytanie, jestem skłonny podzielić się dobrym rozwiązaniem za pomocą BFC.
Codepen próbka z następujących tutaj .

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

W takim przypadku overflow: autowyzwala zachowanie kontekstowe i powoduje, że prawy element rozszerza się tylko do dostępnej pozostałej szerokości i naturalnie rozszerzy się do pełnej szerokości, jeśli .leftzniknie. Bardzo przydatna i czysta sztuczka dla wielu układów interfejsu użytkownika, ale na początku trudno zrozumieć „dlaczego to działa”.

Jeśli nie potrzebujesz zgodności ze starszymi wersjami niektórych przeglądarek ( na przykład IE 10 8 lub mniejszej), możesz użyć calc()funkcji CSS:

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

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

Odpowiedź Boushleya była najbliższa, jednak wskazano jeden problem, który nie został rozwiązany. Prawy div zajmuje całą szerokość przeglądarce; zawartość przyjmuje oczekiwaną szerokość. Aby lepiej zobaczyć ten problem:

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

Zawartość znajduje się we właściwym miejscu (w przeglądarce Firefox), jednak szerokość jest niepoprawna. Kiedy elementy potomne zaczną dziedziczyć szerokość (np. Tabela zwidth: 100% ), otrzymują szerokość równą szerokości przeglądarki, co powoduje, że przelewają się z prawej strony i tworzą poziomy pasek przewijania (w przeglądarce Firefox) lub nie pływają i są przesuwane w dół ( w chromie).

Możesz to łatwo naprawić , dodając overflow: hiddendo prawej kolumny. Zapewnia to prawidłową szerokość zarówno zawartości, jak i div. Ponadto stół otrzyma prawidłową szerokość i wypełni pozostałą dostępną szerokość.

Wypróbowałem niektóre z powyższych rozwiązań, nie działały one w pełni z niektórymi przypadkami na krawędziach i były zbyt skomplikowane, aby uzasadnić ich naprawę. To działa i jest proste.

Jeśli pojawią się jakiekolwiek problemy lub wątpliwości, możesz je zgłosić.

Oto mała poprawka do zaakceptowanego rozwiązania, która zapobiega wpadnięciu prawej kolumny pod lewą kolumnę. Zastąpione width: 100%;z overflow: hidden;pomocą trudne rozwiązania, jeśli ktoś nie wiedział.

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

[edytuj] Sprawdź także przykład układu trzech kolumn: http://jsfiddle.net/MHeqG/3148/

Jeśli próbujesz wypełnić pozostałe miejsce w Flexbox między 2 elementami, dodaj następującą klasę do pustego div między 2 elementami, które chcesz oddzielić:

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

Posługiwać się 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>

Odpowiedź Boushleya wydaje się być najlepszym sposobem, aby to zrobić za pomocą pływaków. Jednak nie jest bez problemów. Zagnieżdżone elementy pływające w rozwiniętym elemencie nie będą dostępne; spowoduje to uszkodzenie strony.

Metoda pokazana w zasadzie „udaje”, jeśli chodzi o element rozwijający się - w rzeczywistości nie jest pływający, po prostu bawi się z elementami pływającymi o stałej szerokości, używając jego marginesów.

Problem polega właśnie na tym, że element rozwijający się nie jest pływający. Jeśli spróbujesz mieć dowolne zagnieżdżone elementy pływające w rozwijanym elemencie, te „zagnieżdżone” elementy pływające nie są tak naprawdę wcale zagnieżdżone; kiedy próbujesz przykleićclear: both; pływające przedmioty pod „zagnieżdżone” elementy, skończysz również czyszczeniem pływaków najwyższego poziomu.

Następnie, aby skorzystać z rozwiązania Boushleya, chciałbym dodać, że powinieneś umieścić div, takie jak: .fakeFloat {height: 100%; szerokość: 100%; float: left; } i umieść to bezpośrednio w rozszerzonym div; cała zawartość rozwiniętego div powinna zatem znajdować się w tym fałszywym elemencie.

Z tego powodu polecam używanie tabel w tym konkretnym przypadku. Elementy pływające tak naprawdę nie są zaprojektowane do przeprowadzania ekspansji, którą chcesz, podczas gdy rozwiązanie wykorzystujące tabelę jest trywialne. Generalnie argumentuje się, że pływanie jest bardziej odpowiednie dla układów, a nie tabel. Ale i tak nie używasz tutaj pływania, oszukujesz go - i to w pewnym sensie przeczy celowi stylistycznego argumentu w tym konkretnym przypadku, w moja skromna opinia.

Próbowałem powyższych rozwiązań dla płynu po lewej stronie, a naprawiony prawy, ale żaden z nich nie zadziałał (wiem, że pytanie jest odwrotne, ale myślę, że to jest istotne). Oto, co zadziałało:

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

Miałem podobny problem i znalazłem rozwiązanie tutaj: https://stackoverflow.com/a/16909141/3934886

Rozwiązanie jest dla stałych środkowych kolumn div i ciekłych.

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

Jeśli chcesz naprawić lewą kolumnę, po prostu zmień odpowiednio formułę.

Możesz użyć właściwości Grid CSS, jest to najbardziej przejrzysty, czysty i intuicyjny sposób strukturyzowania twoich pudeł.

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

Zastanawiam się, że nikt nie używany position: absolutezposition: relative

Tak więc innym rozwiązaniem byłoby:

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

Przykład 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>

Mam na to bardzo proste rozwiązanie! // 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;}

Link: http://jsfiddle.net/MHeqG/

Miałem podobny problem i wymyśliłem następujące, które działały dobrze

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>

Ta metoda nie zawinie się, gdy okno zostanie zmniejszone, ale automatycznie rozszerzy obszar „zawartości”. Zachowa statyczną szerokość dla menu strony (po lewej).

A w przypadku automatycznego rozwijania pola zawartości i lewego pola pionowego (menu witryny):

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

Spróbuj dodać pozycję relative, usuń widthi floatwłaściwości po prawej stronie, a następnie dodaj lefti dodaj wartość rightz 0wartością.

Możesz także dodać margin leftregułę o wartości opartej na szerokości lewego elementu (+ niektóre piksele, jeśli potrzebujesz miejsca między nimi), aby utrzymać jego pozycję.

Ten przykład działa dla mnie:

   #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

Spróbuj tego. To zadziałało dla mnie.

Pracuję nad tym problemem od dwóch dni i mam rozwiązanie, które może działać dla Ciebie i wszystkich innych osób, które chcą sprawić, by responsywna stała szerokość była w lewo i aby prawa strona wypełniała pozostałą część ekranu bez owijania się wokół lewej strony. Zakładam, że zamierzam sprawić, aby strona reagowała w przeglądarkach i urządzeniach mobilnych.

Oto kod

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

Oto moje skrzypce, które mogą działać dla ciebie tak samo jak dla mnie. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Zasady dotyczące przedmiotów i pojemników;

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

Użyj białych znaków: nowrap; dla tekstów w ostatnich pozycjach za ich niezorganizowanie.

Pozycja X% | Pozycja Y% | Pozycja Z%

Całkowita długość zawsze = 100%!

gdyby

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

następnie

Pozycja X = 70%

Pozycja X jest dominująca (pierwsze elementy dominują w układzie CSS tabeli)!

Wypróbuj max-content; właściwość div div do rozłożenia div w kontenerze:

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

}

Najłatwiejszym rozwiązaniem jest użycie marginesu. To również będzie responsywne!

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

Najprostszym rozwiązaniem jest wyrównanie szerokości lewego diva do 100% - szerokości prawego diva oraz marginesu między nimi.

<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

Natknąłem się na ten sam problem, próbując rozmieścić niektóre elementy sterujące interfejsu jqueryUI . Chociaż powszechną filozofią jest teraz „używaj DIVzamiast TABLE”, w moim przypadku użycie TABELI działało znacznie lepiej. W szczególności, jeśli potrzebujesz prostego wyrównania między dwoma elementami (np. Centrowanie w pionie, centrowanie w poziomie itp.), Opcje dostępne w TABELI dają proste, intuicyjne sterowanie.

Oto moje rozwiązanie:

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