Come fare un div riempire uno spazio orizzontale rimanente?

Ho 2 div: uno nella parte sinistra e uno nella parte destra della mia pagina. Quello a sinistra ha una larghezza fissa e voglio che quello a destra riempia lo spazio rimanente.

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

Questo sembra realizzare ciò che stai cercando.

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

Il problema che ho riscontrato con la risposta di Boushley è che se la colonna di destra è più lunga di quella di sinistra, semplicemente avvolgerà la sinistra e riprenderà a riempire l'intero spazio. Questo non è il comportamento che stavo cercando. Dopo aver cercato in molte "soluzioni" ho trovato un tutorial (ora il link è morto) sulla creazione di tre pagine di colonne.

L'autore offre tre diverse modalità, una larghezza fissa, una con tre colonne variabili e una con colonne esterne fisse e una larghezza variabile centrale. Molto più elegante ed efficace di altri esempi che ho trovato. Significativamente migliorata la mia comprensione del layout CSS.

Fondamentalmente, nel semplice caso sopra, fai galleggiare la prima colonna a sinistra e assegnale una larghezza fissa. Quindi assegna alla colonna a destra un margine sinistro leggermente più largo della prima colonna. Questo è tutto. Fatto. Codice di Ala Boushley:

Ecco una demo in 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>

Con l'esempio di Boushley la colonna di sinistra tiene l'altra colonna a destra. Non appena la colonna di sinistra finisce, la destra inizia a riempire di nuovo l'intero spazio. Qui la colonna di destra si allinea semplicemente ulteriormente alla pagina e la colonna di sinistra occupa il suo grande margine di grasso. Non sono necessarie interazioni di flusso.

La soluzione proviene dalla proprietà display.

Fondamentalmente devi fare in modo che i due div si comportino come celle di tabella. Quindi, invece di utilizzare float:left, dovrai utilizzare display:table-cellentrambi i div e per il div di larghezza dinamica devi width:auto;anche impostare . Entrambi i div devono essere collocati in un contenitore di larghezza del 100% con ildisplay:table proprietà.

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

E l'HTML:

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

IMPORTANTE: per Internet Explorer è necessario specificare la proprietà float sul div di larghezza dinamica, altrimenti lo spazio non verrà riempito.

Spero che questo risolva il tuo problema. Se vuoi, puoi leggere l'articolo completo che ho scritto su questo sul mio blog .

In questi giorni, è necessario utilizzare il flexboxmetodo (può essere adattato a tutti i browser con un prefisso del browser).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Maggiori informazioni: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dal momento che questa è una domanda piuttosto popolare, sono propenso a condividere una bella soluzione usando BFC.
Esempio Codepen di quanto segue qui .

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

In questo caso, overflow: autoattiva il comportamento contestuale e fa espandere l'elemento giusto solo alla larghezza rimanente disponibile e, se .leftscompare , si espanderà naturalmente alla larghezza completa . Un trucco molto utile e pulito per molti layout dell'interfaccia utente, ma forse difficile da capire il "perché funziona" all'inizio.

Se non hai bisogno di compatibilità con le versioni precedenti di alcuni browser ( ad esempio IE 10 8 o meno) puoi utilizzare la calc()funzione CSS:

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

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

La risposta di @ Boushley è stata la più vicina, tuttavia è stato sottolineato un problema non risolto. Il div giusto occupa l'intera larghezza del browser; il contenuto assume la larghezza prevista. Per vedere meglio questo problema:

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

Il contenuto è nella posizione corretta (in Firefox), tuttavia la larghezza non è corretta. Quando gli elementi figlio iniziano a ereditare la larghezza (ad esempio la tabella conwidth: 100% ), gli viene assegnata una larghezza uguale a quella del browser, causando il loro trabocco a destra della pagina e creando una barra di scorrimento orizzontale (in Firefox) o non fluttuando e spingendo verso il basso ( in cromo).

Puoi risolverlo facilmente aggiungendo overflow: hiddenalla colonna di destra. Questo ti dà la larghezza corretta sia per il contenuto che per il div. Inoltre, la tabella riceverà la larghezza corretta e riempirà la larghezza rimanente disponibile.

Ho provato alcune delle altre soluzioni di cui sopra, non hanno funzionato completamente con alcuni casi limite ed erano semplicemente troppo contorti per giustificare la loro riparazione. Funziona ed è semplice.

Se ci sono problemi o preoccupazioni, sentiti libero di sollevarli.

Ecco una piccola correzione per la soluzione accettata, che impedisce alla colonna di destra di cadere sotto la colonna di sinistra. Sostituito width: 100%;con overflow: hidden;una soluzione complicata, se qualcuno non lo sapesse.

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

[modifica] Controlla anche un esempio per il layout a tre colonne: http://jsfiddle.net/MHeqG/3148/

Se stai cercando di riempire lo spazio rimanente in una flexbox tra 2 elementi, aggiungi la seguente classe a un div vuoto tra i 2 che vuoi separare:

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

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

La risposta di Boushley sembra essere il modo migliore per organizzare questa operazione usando i float. Tuttavia, non è privo di problemi. Il mobile nidificato all'interno dell'elemento espanso non sarà disponibile; romperà la pagina.

Il metodo mostrato sostanzialmente "finge" quando si tratta dell'elemento in espansione - in realtà non è mobile, sta solo giocando con gli elementi mobili a larghezza fissa usando i suoi margini.

Il problema quindi è esattamente questo: l'elemento espandente non è mobile. Se provi ad avere un nidificato mobile all'interno dell'elemento espandibile, quegli elementi fluttuati "nidificati" non sono affatto nidificati; quando si tenta di attaccare aclear: both; oggetto fluttuante "annidato", finirai per cancellare anche i galleggianti di livello superiore.

Quindi, per usare la soluzione di Boushley, vorrei aggiungere che dovresti inserire un div come il seguente: .fakeFloat {height: 100%; larghezza: 100%; galleggiante: a sinistra; } e posizionalo direttamente all'interno del div espanso; tutti i contenuti del div espanso dovrebbero quindi rientrare in questo elemento fakeFloat.

Per questo motivo, consiglierei di usare le tabelle in questo caso specifico. Gli elementi fluttuanti non sono progettati per eseguire l'espansione che desideri, mentre la soluzione che utilizza una tabella è banale. In genere si argomenta che il floating è più appropriato per i layout, non per le tabelle ... ma non si utilizza comunque il floating qui, lo si sta falsificando - e quel tipo di sconfigge lo scopo dell'argomento stilistico per questo caso specifico, in la mia modesta opinione.

Ho provato le soluzioni di cui sopra per una sinistra liquida e una destra fissa ma non di quelle ha funzionato (sono consapevole che la domanda è per il contrario, ma penso che sia pertinente). Ecco cosa ha funzionato:

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

Ho avuto un problema simile e ho trovato la soluzione qui: https://stackoverflow.com/a/16909141/3934886

La soluzione è per un div centro fisso e colonne laterali liquide.

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

Se desideri una colonna sinistra fissa, modifica la formula di conseguenza.

Puoi usare le proprietà Grid CSS, è il modo più chiaro, pulito e intuitivo di strutturare le tue scatole.

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

Mi chiedo che nessuno utilizzato position: absoluteconposition: relative

Quindi, un'altra soluzione sarebbe:

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

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

Ho una soluzione molto semplice per questo! // 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/

Ho avuto un problema simile e ho pensato a quanto segue che ha funzionato bene

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>

Questo metodo non andrà a capo quando la finestra è ridotta ma espanderà automaticamente l'area del "contenuto". Manterrà una larghezza statica per il menu del sito (a sinistra).

E per la casella di contenuto ad espansione automatica e la casella verticale sinistra (menu del sito) demo:

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

Prova ad aggiungere posizione relative, rimuovere widthe floatproprietà del lato destro, quindi aggiungi lefte rightproprietà con 0valore.

Inoltre, puoi aggiungere una margin leftregola con il valore basato sulla larghezza dell'elemento sinistro (+ alcuni pixel se hai bisogno di spazio in mezzo) per mantenere la sua posizione.

Questo esempio funziona per me:

   #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

Prova questo. Ha funzionato per me.

Ho lavorato su questo problema per due giorni e ho una soluzione che potrebbe funzionare per te e chiunque altro stia cercando di lasciare una larghezza fissa reattiva a sinistra e avere il lato destro riempire il resto dello schermo senza avvolgere il lato sinistro. L'intenzione che presumo è quella di rendere la pagina reattiva nei browser e nei dispositivi mobili.

Ecco il codice

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

Ecco il mio violino che potrebbe funzionare solo per te come ha fatto per me. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Regole per articoli e contenitori;

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

Usa lo spazio bianco: nowrap; per i testi negli ultimi articoli per la loro destrutturazione.

Articolo X% | Articolo Y% | Articolo Z%

Lunghezza totale sempre = 100%!

Se

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

poi

Articolo X = 70%

L'elemento X è dominante (i primi elementi sono dominanti nel layout CSS della tabella)!

Prova max-content; proprietà per div all'interno per diffondere div in container:

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

}

La soluzione più semplice è usare il margine. Anche questo sarà reattivo!

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

La soluzione più semplice è quella di rendere la larghezza div sinistra uguale al 100% - la larghezza della divisione destra più qualsiasi margine tra di loro.

<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

Mi sono imbattuto in questo stesso problema cercando di impaginare alcuni controlli jqueryUI . Sebbene la filosofia comune ora sia "usa DIVinvece di TABLE", nel mio caso ho scoperto che usare TABLE ha funzionato molto meglio. In particolare, se è necessario un allineamento diretto tra i due elementi (ad es. Centraggio verticale, centraggio orizzontale, ecc.) Le opzioni disponibili con TABELLA forniscono controlli semplici e intuitivi per questo.

Ecco la mia soluzione:

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