Comment faire un div remplir un espace horizontal restant?

J'ai 2 divisions: une dans le côté gauche et une dans le côté droit de ma page. Celui du côté gauche a une largeur fixe et je veux que celui du côté droit remplisse l'espace restant.

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

Cela semble accomplir ce que vous cherchez.

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

Le problème que j'ai trouvé avec la réponse de Boushley est que si la colonne de droite est plus longue que la gauche, elle s'enroulera autour de la gauche et recommencera à remplir tout l'espace. Ce n'est pas le comportement que je recherchais. Après avoir cherché parmi de nombreuses «solutions», j'ai trouvé un tutoriel (maintenant le lien est mort) sur la création de pages à trois colonnes.

L'auteur propose trois façons différentes, une de largeur fixe, une avec trois colonnes variables et une avec des colonnes externes fixes et un milieu de largeur variable. Beaucoup plus élégant et efficace que les autres exemples que j'ai trouvés. Amélioration significative de ma compréhension de la mise en page CSS.

Fondamentalement, dans le cas simple ci-dessus, faites flotter la première colonne à gauche et donnez-lui une largeur fixe. Donnez ensuite à la colonne de droite une marge gauche un peu plus large que la première colonne. C'est ça. Terminé. Code d'Ala Boushley:

Voici une démo dans 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>

Avec l'exemple de Boushley, la colonne de gauche contient l'autre colonne à droite. Dès que la colonne de gauche se termine, la droite recommence à remplir tout l'espace. Ici, la colonne de droite s'aligne simplement plus loin dans la page et la colonne de gauche occupe sa grande marge de gras. Aucune interaction de flux nécessaire.

La solution vient de la propriété display.

Fondamentalement, vous devez faire en sorte que les deux divs agissent comme des cellules de tableau. Ainsi, au lieu d'utiliser float:left, vous devrez utiliser display:table-cellsur les deux divs, et pour la div dynamique de largeur que vous devez width:auto;également définir . Les deux divs doivent être placés dans un conteneur de 100% de largeur avec la display:tablepropriété.

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

Et le HTML:

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

IMPORTANT: pour Internet Explorer, vous devez spécifier la propriété float sur la largeur dynamique div, sinon l'espace ne sera pas rempli.

J'espère que cela résoudra votre problème. Si vous le souhaitez, vous pouvez lire l'article complet que j'ai écrit à ce sujet sur mon blog .

De nos jours, vous devez utiliser la flexboxméthode (peut être adaptée à tous les navigateurs avec un préfixe de navigateur).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Plus d'informations: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Puisque c'est une question plutôt populaire, je suis enclin à partager une belle solution en utilisant BFC.
Échantillon Codepen des éléments suivants ici .

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

Dans ce cas, overflow: autodéclenche le comportement du contexte et fait que l'élément droit ne se développe que sur la largeur restante disponible et il se développera naturellement sur toute la largeur s'il .leftdisparaît. Une astuce très utile et propre pour de nombreuses mises en page d'interface utilisateur, mais peut-être difficile de comprendre le "pourquoi cela fonctionne" au début.

Si vous n'avez pas besoin de compatibilité avec les anciennes versions de certains navigateurs (IE 10 8 ou moins par exemple), vous pouvez utiliser la calc()fonction CSS:

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

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

@ La réponse de Boushley était la plus proche, mais un problème non résolu a été signalé. Le div droit prend toute la largeur du navigateur; le contenu prend la largeur attendue. Pour mieux voir ce problème:

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

Le contenu est au bon endroit (dans Firefox), cependant, la largeur est incorrecte. Lorsque les éléments enfants commencent à hériter de la largeur (par exemple le tableau avec width: 100%), une largeur égale à celle du navigateur leur est attribuée, ce qui les fait déborder à droite de la page et crée une barre de défilement horizontale (dans Firefox) ou ne flotte pas et est poussée vers le bas ( en chrome).

Vous pouvez résoudre ce problème facilement en l'ajoutant overflow: hiddenà la colonne de droite. Cela vous donne la largeur correcte pour le contenu et le div. De plus, la table recevra la bonne largeur et remplira la largeur restante disponible.

J'ai essayé certaines des autres solutions ci-dessus, elles ne fonctionnaient pas pleinement avec certains cas de bord et étaient tout simplement trop compliquées pour justifier leur correction. Cela fonctionne et c'est simple.

S'il y a des problèmes ou des préoccupations, n'hésitez pas à les signaler.

Voici un petit correctif pour la solution acceptée, qui empêche la colonne de droite de tomber sous la colonne de gauche. Remplacé width: 100%;par overflow: hidden;une solution délicate, si quelqu'un ne le savait pas.

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

[modifier] Consultez également un exemple de disposition à trois colonnes: http://jsfiddle.net/MHeqG/3148/

Si vous essayez de remplir l'espace restant dans une boîte flexible entre 2 éléments, ajoutez la classe suivante à un div vide entre les 2 que vous souhaitez séparer:

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

Utilisation 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 réponse de Boushley semble être la meilleure voie à suivre pour organiser cela à l'aide de flotteurs. Cependant, ce n'est pas sans problèmes. L'imbrication flottante dans l'élément développé ne sera pas disponible pour vous; cela cassera la page.

La méthode montrée "en fait faux" quand il s'agit de l'élément en expansion - il n'est pas réellement flottant, il joue juste avec les éléments flottants à largeur fixe en utilisant ses marges.

Le problème est alors exactement cela: l'élément en expansion n'est pas flotté. Si vous essayez d'avoir des éléments flottants imbriqués dans l'élément en expansion, ces éléments flottants "imbriqués" ne sont pas vraiment imbriqués du tout; lorsque vous essayez de coller unclear: both; sous vos éléments flottants "imbriqués", vous finirez également par effacer les flotteurs de niveau supérieur.

Ensuite, pour utiliser la solution de Boushley, je voudrais ajouter que vous devez placer un div tel que le suivant: .fakeFloat {height: 100%; largeur: 100%; flotteur: gauche; } et placez-le directement dans le div étendu; tout le contenu du div étendu devrait alors aller dans cet élément fakeFloat.

Pour cette raison, je recommande d'utiliser des tableaux dans ce cas spécifique. Les éléments flottants ne sont vraiment pas conçus pour faire l'expansion que vous souhaitez, alors que la solution utilisant une table est triviale. Un argument est généralement avancé selon lequel le flottement est plus approprié pour les mises en page, pas pour les tableaux ... mais vous n'utilisez pas le flottant ici de toute façon, vous le simulez - et ce genre de résultat va à l'encontre de l'objectif de l'argument stylistique pour ce cas spécifique, dans mon humble avis.

J'ai essayé les solutions ci-dessus pour une gauche liquide, et une droite fixe mais aucune d'entre elles n'a fonctionné (je sais que la question est pour l'inverse mais je pense que cela est pertinent). Voici ce qui a fonctionné:

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

J'ai eu un problème similaire et j'ai trouvé la solution ici: https://stackoverflow.com/a/16909141/3934886

La solution est pour une division centrale fixe et des colonnes latérales liquides.

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

Si vous voulez une colonne gauche fixe, changez simplement la formule en conséquence.

Vous pouvez utiliser les propriétés CSS de la grille, c'est la façon la plus claire, la plus claire et la plus intuitive de structurer vos boîtes.

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

Je me demande que personne n'a utilisé position: absoluteavecposition: relative

Donc, une autre solution serait:

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

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

J'ai une solution très simple pour cela! // 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;}

Lien: http://jsfiddle.net/MHeqG/

J'ai eu un problème similaire et j'ai trouvé ce qui a bien fonctionné

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>

Cette méthode ne se terminera pas lorsque la fenêtre sera réduite, mais étendra automatiquement la zone de «contenu». Il gardera une largeur statique pour le menu du site (à gauche).

Et pour la démonstration de la zone de contenu à expansion automatique et de la zone verticale gauche (menu du site):

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

Essayez d'ajouter la position relative, la suppression widthet les floatpropriétés du côté droit, puis ajoutez leftet la rightpropriété avec une 0valeur.

En outre, vous pouvez ajouter une margin leftrègle dont la valeur est basée sur la largeur de l'élément de gauche (+ quelques pixels si vous avez besoin d'espace entre les deux) pour maintenir sa position.

Cet exemple fonctionne pour moi:

   #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

Essaye ça. Ça a marché pour moi.

Je travaille sur ce problème depuis deux jours et j'ai une solution qui peut fonctionner pour vous et quiconque essaie de créer une largeur fixe réactive à gauche et que le côté droit remplisse le reste de l'écran sans s'enrouler autour du côté gauche. L'intention que je suppose est de rendre la page sensible aux navigateurs ainsi qu'aux appareils mobiles.

Voici le code

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

Voici mon violon qui peut fonctionner pour vous comme pour moi. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Règles pour les articles et les conteneurs;

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

Utilisez un espace blanc: nowrap; pour les textes des derniers postes pour leur déstructuration.

Article X% | Article Y% | Article Z%

Longueur totale toujours = 100%!

si

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

puis

Article X = 70%

L'élément X est dominant (les premiers éléments sont dominants dans la disposition CSS du tableau)!

Essayez max-content; propriété pour div inside pour étendre div dans conteneur:

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

}

La solution la plus simple consiste à utiliser margin. Ce sera également réactif!

<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 solution la plus simple consiste à rendre la largeur du div gauche égale à 100% - la largeur du div droit plus toute marge entre eux.

<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

J'ai rencontré ce même problème en essayant de mettre en page certains contrôles jqueryUI . Bien que la philosophie commune soit désormais «utiliser DIVau lieu deTABLE ", j'ai trouvé dans mon cas que l'utilisation de TABLE fonctionnait beaucoup mieux. En particulier, si vous avez besoin d'un alignement direct entre les deux éléments (par exemple, le centrage vertical, le centrage horizontal, etc.), les options disponibles avec TABLE donnent des commandes simples et intuitives pour cela.

Voici ma solution:

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