title: How do I use max-height on <div> element?
body: <p>I have a  element that is set to contain a table element.</p>
  
  <p>The table element will have anywhere from 0 to upwards of 350 rows.</p>
  
  <p>I thought the easiest way to size this DIV element was to apply the max-height property so the DIV element would grow as content was added and add a scroll bar once the content exceeds the max-height property.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div style="max-height:209px;overflow:auto;"&gt;
       &lt;table&gt;
           &lt;tr&gt;&lt;td&gt;CONTENT&lt;/td&gt;&lt;/tr&gt;
       &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I get instead is that when the content reaches the max-height limit, instead of applying the overflow property, the div element just keeps growing.</p>
  
  <p>Of course this is only happening in IE7.  Firefox and Safari work as designed.</p>
  
  <p>edit: okay, here's the entire HTML page, <kbd>ctrl</kbd>+<kbd>f</kbd> "distances" for the area that I'm having problems with.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;
   &lt;title&gt;Voyage Planning | Tools | Discharge Ports&lt;/title&gt;
      &lt;link rel="shortcut icon" type="image/x-icon" href="/vp/favicon.ico" /&gt;
   &lt;!--[if gte IE 6]&gt;&lt;!--&gt;
    &lt;link rel="stylesheet" type="text/css" href="/vp/_assets/css/screen.css" media="screen,projection,print" /&gt;
    &lt;script type="text/javascript" src="/vp/_assets/js/jquery-1.2.3.min.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="/vp/_assets/js/main.js"&gt;&lt;/script&gt;
      &lt;!--&lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  &lt;!-- 
   function dischargeport_selected()
   {
    if (document.postform.dpid.value == "")
     { window.location.href = "/vp/tools/dischargeports.asp"; }
    else
     { window.location.href = "/vp/tools/dischargeports.asp?dpid=" + document.postform.dpid.value; }
   }
  
   function submitform()
   {
    if (validateform() &amp;&amp; confirm("Are you sure you want to update this discharge port?"))
    {
     document.getElementById("spinner").style.display = "block";
     document.getElementById("update").style.display = "none";
     document.getElementById("spinner").innerHTML = "&lt;img src='/vp/_assets/img/spinner.gif' alt='' /&gt;"; 
    }
    else
     { return false; }
   }
   function validateform()
   {
    var isformcomplete = true;
    message = "The following tasks need to be completed     \nbefore continuing:\n\n";
  
    if (document.postform.name.value == "")
    {
     message += "* Enter the discharge port's name\n";
     isformcomplete = false;
    }
    if (!is_numeric(document.postform.transittime.value))
    {
     message += "* Transit times must be numeric\n";
     isformcomplete = false;
    }  
    if ( !is_numeric($("#port_costs").val()) )
    {
     message += "* Port costs must be numeric\n";
     isformcomplete = false;
    }   
    if (isformcomplete == false)
    {
     alert(message);
    }
    return isformcomplete;
   }
  //--&gt;
  &lt;/script&gt;
  &lt;div id="container"&gt;
   &lt;div id="content"&gt;
       &lt;div id="header"&gt;
  
    &lt;div id="development"&gt;
     WEB SERVER:&amp;nbsp;
     &lt;span class="highlight"&gt;&amp;nbsp;DEV&amp;nbsp;&lt;/span&gt; 
     &amp;nbsp;SQL SERVER:&amp;nbsp;
     &lt;span class="highlight"&gt;&amp;nbsp;DEV&amp;nbsp;&lt;/span&gt;
    &lt;/div&gt;
  
   &lt;span class="logo"&gt;&lt;img src="/vp/_assets/img/header/logo.gif" /&gt;&lt;/span&gt;
      &lt;span class="randomPics"&gt;&lt;img src="/vp/_assets/img/header/header4.gif" /&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div id="menu"&gt;
           &lt;span class="nav"&gt;
               &lt;a href="/vp/index.asp"&gt;Main Menu&lt;/a&gt;&amp;nbsp;&amp;gt;
                  &lt;a href="/vp/tools.asp"&gt;Tools&lt;/a&gt;&amp;nbsp;&amp;gt;
                  Discharge Ports
              &lt;/span&gt;
              &lt;span class="icons"&gt;&lt;a href="/vp/tools/dischargeports.asp" class="tooltip" title="Add discharge port"&gt;&lt;img src="/vp/_assets/img/icons/new.gif" alt="New" /&gt;&lt;/a&gt;&lt;span class="spacer"&gt;&lt;/span&gt;&lt;a href="/vp/scripts/logoff.asp" class="tooltip" title="Logoff"&gt;&lt;img src="/vp/_assets/img/icons/logoff.gif" alt="Logoff" /&gt;&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;table&gt;
           &lt;caption&gt;Edit discharge port&lt;/caption&gt;
          &lt;/table&gt;
  
          &lt;br /&gt;
          &lt;form method="post" action="/vp/tools/scripts/updatedischargeport.asp" name="postform" onSubmit="return submitform();"&gt;
          &lt;input type="hidden" name="fromsubmit" value="true" /&gt;
          &lt;input type="hidden" name="edit" value="true" /&gt;
          &lt;table class="form fourcolumn"&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;span class="tooltip long" title="To edit an existing discharge port, select one from the drop down list"&gt;Discharge ports&lt;/span&gt;&lt;/th&gt;
                  &lt;td&gt;
                   &lt;select name="dpid" class="large" onChange="dischargeport_selected();"&gt;
                      &lt;option value="" &gt;&lt;/option&gt;
  
                    &lt;option value="14" &gt;AG [BUE] BUENOS AIRES&lt;/option&gt;
  
                    &lt;option value="126" &gt;AG [ZZZ] Test&lt;/option&gt;
  
                    &lt;option value="107" &gt;AG [ZAR] ZARATE&lt;/option&gt;
  
                    &lt;option value="4" selected="selected"&gt;AL [ALG] ALGERIA&lt;/option&gt;
  
                    &lt;option value="15" &gt;AR [BUE] BUENOS AIRES&lt;/option&gt;
  
                    &lt;option value="109" &gt;AR [CAM] CAMPANA&lt;/option&gt;
  
                    &lt;option value="27" &gt;AR [DEL] DETLA DOCK&lt;/option&gt;
  
                    &lt;option value="55" &gt;AR [MON] MONTEVIDEO&lt;/option&gt;
  
                    &lt;option value="108" &gt;AR [ZAR] ZARATE&lt;/option&gt;
  
                    &lt;option value="3" &gt;AU [ADE] ADELAIDE&lt;/option&gt;
  
                    &lt;option value="13" &gt;AU [BRI] BRISBANE&lt;/option&gt;
  
                    &lt;option value="53" &gt;AU [MEL] MELBOURNE&lt;/option&gt;
  
                    &lt;option value="116" &gt;AU [NWC] NEW CASTLE&lt;/option&gt;
  
                    &lt;option value="65" &gt;AU [PTK] PORT KEMBLA&lt;/option&gt;
  
                    &lt;option value="95" &gt;AU [SYD] SYDNEY&lt;/option&gt;
  
                    &lt;option value="102" &gt;AU [WEL] WELLINGTON&lt;/option&gt;
  
                    &lt;option value="5" &gt;BL [ANT] ANTOFAGASTA&lt;/option&gt;
  
                    &lt;option value="8" &gt;BL [ARI] ARICA&lt;/option&gt;
  
                    &lt;option value="110" &gt;BR [ANG] ANGRA DOS REIS&lt;/option&gt;
  
                    &lt;option value="7" &gt;BR [ARA] ARATU&lt;/option&gt;
  
                    &lt;option value="86" &gt;BR [SEP] ITAGUAI&lt;/option&gt;
  
                    &lt;option value="63" &gt;BR [PAR] PARANAGUA&lt;/option&gt;
  
                    &lt;option value="76" &gt;BR [REC] RECIFE&lt;/option&gt;
  
                    &lt;option value="77" &gt;BR [RGR] RIO GRANDE&lt;/option&gt;
  
                    &lt;option value="114" &gt;BR [SAL] SALVADOR&lt;/option&gt;
  
                    &lt;option value="81" &gt;BR [SAN] SANTOS&lt;/option&gt;
  
                    &lt;option value="113" &gt;BR [FRA] SAO FRANCISCO DO SUL&lt;/option&gt;
  
                    &lt;option value="83" &gt;BR [SAO] SAO SEBASTIAO&lt;/option&gt;
  
                    &lt;option value="78" &gt;CA [RIJ] RIJEKA&lt;/option&gt;
  
                    &lt;option value="6" &gt;CH [ANT] ANTOFAGASTA&lt;/option&gt;
  
                    &lt;option value="9" &gt;CH [ARI] ARICA&lt;/option&gt;
  
                    &lt;option value="48" &gt;CH [LIR] LIRQUEN&lt;/option&gt;
  
                    &lt;option value="82" &gt;CH [SAN] SAN ANTONIO&lt;/option&gt;
  
                    &lt;option value="11" &gt;CL [BAR] BARRANQUILLA&lt;/option&gt;
  
                    &lt;option value="16" &gt;CL [BUE] BUENAVENTURA&lt;/option&gt;
  
                    &lt;option value="121" &gt;CL [CAR] CARTAGENA&lt;/option&gt;
  
                    &lt;option value="25" &gt;CN [DAL] DALIEN&lt;/option&gt;
  
                    &lt;option value="29" &gt;CN [FNC] FANGCHENG&lt;/option&gt;
  
                    &lt;option value="120" &gt;CN [LIA] LIANYUNGANG&lt;/option&gt;
  
                    &lt;option value="60" &gt;CN [NAN] NANJING&lt;/option&gt;
  
                    &lt;option value="111" &gt;CN [NTG] NANTONG&lt;/option&gt;
  
                    &lt;option value="73" &gt;CN [QIN] QINHUANGDAO&lt;/option&gt;
  
                    &lt;option value="87" &gt;CN [SHA] SHANGHAI&lt;/option&gt;
  
                    &lt;option value="88" &gt;CN [SHE] SHEKOU&lt;/option&gt;
  
                    &lt;option value="18" &gt;CR [CAL] CALDERA&lt;/option&gt;
  
                    &lt;option value="80" &gt;DR [RIO] RIO HAINA&lt;/option&gt;
  
                    &lt;option value="32" &gt;EC [GUA] GUAYAQUIL&lt;/option&gt;
  
                    &lt;option value="125" &gt;EG [ALX] ALEXANDRIA&lt;/option&gt;
  
                    &lt;option value="17" &gt;EG [CAI] CAIRO&lt;/option&gt;
  
                    &lt;option value="2" &gt;ES [ACA] ACAJUTLA&lt;/option&gt;
  
                    &lt;option value="68" &gt;GU [PTQ] PUERTO QUETAZAL&lt;/option&gt;
  
                    &lt;option value="69" &gt;HN [PTQ] PUERTO QUETZAL&lt;/option&gt;
  
                    &lt;option value="36" &gt;ID [JAK] JAKARTA&lt;/option&gt;
  
                    &lt;option value="40" &gt;ID [KAU] KUATAN&lt;/option&gt;
  
                    &lt;option value="52" &gt;ID [MED] MEDAN&lt;/option&gt;
  
                    &lt;option value="85" &gt;ID [SEM] SEMARANG&lt;/option&gt;
  
                    &lt;option value="94" &gt;ID [SUR] SURABAYA&lt;/option&gt;
  
                    &lt;option value="19" &gt;IN [CAL] CALCUTTA&lt;/option&gt;
  
                    &lt;option value="38" &gt;IN [KAN] KANDLA&lt;/option&gt;
  
                    &lt;option value="33" &gt;IS [HAI] HAIFA&lt;/option&gt;
  
                    &lt;option value="42" &gt;JM [KIN] KINGSTON&lt;/option&gt;
  
                    &lt;option value="21" &gt;JP [CHI] CHIBA&lt;/option&gt;
  
                    &lt;option value="122" &gt;JP [HAK] HAKATA&lt;/option&gt;
  
                    &lt;option value="41" &gt;JP [KAW] KAWASAKI&lt;/option&gt;
  
                    &lt;option value="43" &gt;JP [KOK] KOKURA&lt;/option&gt;
  
                    &lt;option value="49" &gt;JP [MAI] MAIZURU&lt;/option&gt;
  
                    &lt;option value="54" &gt;JP [MIZ] MIZUSHIMA&lt;/option&gt;
  
                    &lt;option value="61" &gt;JP [NAN] NAN-YO  TOSOH&lt;/option&gt;
  
                    &lt;option value="119" &gt;JP [NII] NIIHAMA&lt;/option&gt;
  
                    &lt;option value="123" &gt;JP [ONA] ONAHAMA&lt;/option&gt;
  
                    &lt;option value="62" &gt;JP [OSA] OSAKA&lt;/option&gt;
  
                    &lt;option value="89" &gt;JP [SHI] SHIKIMA&lt;/option&gt;
  
                    &lt;option value="96" &gt;JP [TAC] TACHIBANA&lt;/option&gt;
  
                    &lt;option value="104" &gt;JP [YOK] YOKKAICHI&lt;/option&gt;
  
                    &lt;option value="35" &gt;KR [INC] INCHEON&lt;/option&gt;
  
                    &lt;option value="46" &gt;KR [KUN] KUNSAN&lt;/option&gt;
  
                    &lt;option value="71" &gt;KR [PUS] PUSAN&lt;/option&gt;
  
                    &lt;option value="50" &gt;KR [MAI] TRANSHIP TO MAIZURU&lt;/option&gt;
  
                    &lt;option value="101" &gt;KR [ULS] ULSAN&lt;/option&gt;
  
                    &lt;option value="12" &gt;ML [BIN] BINTULU&lt;/option&gt;
  
                    &lt;option value="45" &gt;ML [KUA] KUANTAN&lt;/option&gt;
  
                    &lt;option value="64" &gt;ML [PAS] PASIR GUDANG&lt;/option&gt;
  
                    &lt;option value="66" &gt;ML [PTK] PORT KLANG&lt;/option&gt;
  
                    &lt;option value="58" &gt;MV [MV] &amp;nbsp;MEXICO - VITRO&lt;/option&gt;
  
                    &lt;option value="59" &gt;MX [MX] &amp;nbsp;MEXICO - NON-VITRO&lt;/option&gt;
  
                    &lt;option value="47" &gt;NI [LAG] LAGOS&lt;/option&gt;
  
                    &lt;option value="57" &gt;NZ [MTM] MT MANGANUE&lt;/option&gt;
  
                    &lt;option value="99" &gt;NZ [TAU] TAURANGA&lt;/option&gt;
  
                    &lt;option value="103" &gt;NZ [WEL] WELLINGTON&lt;/option&gt;
  
                    &lt;option value="10" &gt;PA [BAL] BALBOA&lt;/option&gt;
  
                    &lt;option value="20" &gt;PE [CAL] CALLAO&lt;/option&gt;
  
                    &lt;option value="72" &gt;PK [QAS] &lt;/option&gt;
  
                    &lt;option value="39" &gt;PK [KAR] KARACHI&lt;/option&gt;
  
                    &lt;option value="51" &gt;PL [MAN] MANILA&lt;/option&gt;
  
                    &lt;option value="30" &gt;PO [GDA] GDANSK&lt;/option&gt;
  
                    &lt;option value="91" &gt;PO [STE] STETTIN&lt;/option&gt;
  
                    &lt;option value="84" &gt;PO [SCZ] SZCZECIN&lt;/option&gt;
  
                    &lt;option value="117" &gt;RA [KLA] KLAIPEDA&lt;/option&gt;
  
                    &lt;option value="115" &gt;RA [SPT] ST. PETERSBURG&lt;/option&gt;
  
                    &lt;option value="79" &gt;RJ [RIJ] RIJEKA WAREHOUSE&lt;/option&gt;
  
                    &lt;option value="23" &gt;SA [CT] &amp;nbsp;CAPE TOWN&lt;/option&gt;
  
                    &lt;option value="28" &gt;SA [DUR] DURBAN&lt;/option&gt;
  
                    &lt;option value="90" &gt;SG [SIN] SINGAPORE&lt;/option&gt;
  
                    &lt;option value="26" &gt;SI [DAM] DAMMAM&lt;/option&gt;
  
                    &lt;option value="37" &gt;SI [JED] JEDDAH&lt;/option&gt;
  
                    &lt;option value="74" &gt;SI [RAK] RAK&lt;/option&gt;
  
                    &lt;option value="92" &gt;TG [SUA] SUAO&lt;/option&gt;
  
                    &lt;option value="97" &gt;TG [TAI] TAICHUNG&lt;/option&gt;
  
                    &lt;option value="1" &gt;TH [01] &amp;nbsp;KOS&lt;/option&gt;
  
                    &lt;option value="44" &gt;TH [KOS] KOSICHANG&lt;/option&gt;
  
                    &lt;option value="31" &gt;TK [GEM] GEMLIK&lt;/option&gt;
  
                    &lt;option value="100" &gt;TK [TEK] TEKIRDAG&lt;/option&gt;
  
                    &lt;option value="70" &gt;TR [PTS] PORT OF SPAIN&lt;/option&gt;
  
                    &lt;option value="124" &gt;TW [KEE] KEELUNG&lt;/option&gt;
  
                    &lt;option value="93" &gt;TW [SUA] SUAO&lt;/option&gt;
  
                    &lt;option value="98" &gt;TW [TAI] TAICHUNG&lt;/option&gt;
  
                    &lt;option value="75" &gt;UE [RAK] RAS AL KHAIMAH&lt;/option&gt;
  
                    &lt;option value="56" &gt;UR [MON] MONTEVIDEO&lt;/option&gt;
  
                    &lt;option value="22" &gt;VN [CL] &amp;nbsp;CAI LAN&lt;/option&gt;
  
                    &lt;option value="34" &gt;VN [HO] &amp;nbsp;HO CHI MIN&lt;/option&gt;
  
                    &lt;option value="24" &gt;VZ [CUM] CUMANA&lt;/option&gt;
  
                    &lt;option value="67" &gt;VZ [PTO] PUERTO CABELLO&lt;/option&gt;
  
                   &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;&lt;td class="break" colspan="4"&gt;&lt;hr /&gt;&lt;/td&gt;&lt;/tr&gt;  
              &lt;tr&gt;
               &lt;th&gt;Country&lt;/th&gt;
                  &lt;td&gt;
  
                        &lt;strong&gt;AL [Algeria]&lt;/strong&gt;
  
                  &lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;
              &lt;tr&gt;
               &lt;th&gt;Code&lt;/th&gt;
                  &lt;td&gt;
  
                        &lt;strong&gt;ALG&lt;/strong&gt;
  
                 &lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;
              &lt;tr&gt;&lt;td class="break" colspan="4"&gt;&lt;hr /&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
               &lt;th&gt;Name&lt;span class="required"&gt;*&lt;/span&gt;&lt;/th&gt;
                  &lt;td&gt;&lt;input type="text" class="large" name="name" value="ALGERIA" maxlength="30" /&gt;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;
              &lt;tr&gt;&lt;td class="break" colspan="4"&gt;&lt;hr /&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
               &lt;th&gt;Surveyor&lt;/th&gt;
                  &lt;td&gt;&lt;input type="text" class="large" name="surveyor" value="SGS" maxlength="30" /&gt;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;
              &lt;tr&gt;
               &lt;th&gt;Ship agent&lt;/th&gt;
                  &lt;td&gt;&lt;input type="text" class="large" name="shipagent" value="EUROMAR" maxlength="30" /&gt;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;   
              &lt;tr&gt;
               &lt;th&gt;Transit time&lt;/th&gt;
                  &lt;td&gt;&lt;input type="text" class="small" name="transittime" value="0" maxlength="3" /&gt;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;
              &lt;tr&gt;&lt;td class="break" colspan="4"&gt;&lt;hr /&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
               &lt;th&gt;Port costs&lt;/th&gt;
                  &lt;td&gt;&lt;input type="text" class="small" name="port_costs" id="port_costs" value="0" maxlength="10" /&gt;&amp;nbsp;&lt;strong&gt;($)&lt;/strong&gt;&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;/td&gt;
             &lt;/tr&gt;              
          &lt;/table&gt;
  
            &lt;br /&gt;
            &lt;table&gt;&lt;caption class="subcaption"&gt;Distance to load ports&lt;/caption&gt;&lt;/table&gt;
                  &lt;br /&gt;
  
                  &lt;table class="form fourcolumn"&gt;
                   &lt;tr&gt;
                       &lt;th&gt;Load ports&lt;/th&gt;
                       &lt;td&gt;
                           &lt;select name="add_loadport" class="large"&gt;
                        &lt;option value="" selected="selected"&gt;&lt;/option&gt;
  
                                &lt;option value="BEA" &gt;BEA [BEAUMONT]&lt;/option&gt;
  
                                &lt;option value="BRO" &gt;BRO [BROWNSVILLE]&lt;/option&gt;
  
                                &lt;option value="CAS" &gt;CAS [CASTELLON ESP]&lt;/option&gt;
  
                                &lt;option value="LAR" &gt;LAR [LAREDO]&lt;/option&gt;
  
                                &lt;option value="LBC" &gt;LBC [LONG BEACH CA.]&lt;/option&gt;
  
                                &lt;option value="LON" &gt;LON [LONGVIEW WA]&lt;/option&gt;
  
                                &lt;option value="LOS" &gt;LOS [LOS ANGELES]&lt;/option&gt;
  
                                &lt;option value="OTH" &gt;OTH [OTHER]&lt;/option&gt;
  
                                &lt;option value="POR" &gt;POR [PORT ARTHUR TX]&lt;/option&gt;
  
                                &lt;option value="PTL" &gt;PTL [PORTLAND OR.]&lt;/option&gt;
  
                                &lt;option value="RAK" &gt;RAK [RAS AL KAIMAH]&lt;/option&gt;
  
                                &lt;option value="RIJ" &gt;RIJ [RIJEKA]&lt;/option&gt;
  
                                &lt;option value="SAN" &gt;SAN [SAN DIEGO CA]&lt;/option&gt;
  
                                &lt;option value="TRO" &gt;TRO [TRONA]&lt;/option&gt;
  
                                &lt;option value="ZZZ" &gt;ZZZ [Test]&lt;/option&gt;
  
                        &lt;/select&gt;
                          &lt;/td&gt;
                          &lt;th&gt;Nautical miles&lt;/th&gt;
                          &lt;td&gt;&lt;div style="float:left;"&gt;&lt;input type="text" class="small" name="add_loadport_nauticalmiles" id="add_loadport_nauticalmiles" value="0" maxlength="10" /&gt;&lt;/div&gt;&lt;div style="float:right;"&gt;&lt;img src="/vp/_assets/img/buttons/add.gif" name="add_loadport_btn" id="add_loadport_btn" alt="" /&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;/tr&gt;
      &lt;/table&gt;          
                  &lt;br /&gt;
                  &lt;div style="max-height:197px;overflow:auto;"&gt;
                   &lt;table class="distances"&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                       &lt;tr&gt;
                           &lt;th&gt;To&lt;/th&gt;
                           &lt;td&gt;[BRO] BROWNSVILLE&lt;/td&gt;
                              &lt;th&gt;Nautical miles&lt;/th&gt;
                              &lt;td&gt;&lt;input type="text" class="small" name="" id="" value="0" maxlength="10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                      &lt;/table&gt;
                  &lt;/div&gt;              
                  &lt;br /&gt;
                  &lt;table&gt;&lt;caption class="subcaption"&gt;Distance to discharge ports&lt;/caption&gt;&lt;/table&gt;
                  &lt;br /&gt;
  
                  &lt;table class="form fourcolumn"&gt;
                   &lt;tr&gt;
                       &lt;th&gt;Discharge ports&lt;/th&gt;
                       &lt;td&gt;
                           &lt;select name="add_dischargeport" class="large"&gt;
                        &lt;option value="" selected="selected"&gt;&lt;/option&gt;
  
                                &lt;option value="14" &gt;AG [BUE] BUENOS AIRES&lt;/option&gt;
  
                                &lt;option value="126" &gt;AG [ZZZ] Test&lt;/option&gt;
  
                                &lt;option value="107" &gt;AG [ZAR] ZARATE&lt;/option&gt;
  
                                &lt;option value="4" &gt;AL [ALG] ALGERIA&lt;/option&gt;
  
                                &lt;option value="15" &gt;AR [BUE] BUENOS AIRES&lt;/option&gt;
  
                                &lt;option value="109" &gt;AR [CAM] CAMPANA&lt;/option&gt;
  
                                &lt;option value="27" &gt;AR [DEL] DETLA DOCK&lt;/option&gt;
  
                                &lt;option value="55" &gt;AR [MON] MONTEVIDEO&lt;/option&gt;
  
                                &lt;option value="108" &gt;AR [ZAR] ZARATE&lt;/option&gt;
  
                                &lt;option value="3" &gt;AU [ADE] ADELAIDE&lt;/option&gt;
  
                                &lt;option value="13" &gt;AU [BRI] BRISBANE&lt;/option&gt;
  
                                &lt;option value="53" &gt;AU [MEL] MELBOURNE&lt;/option&gt;
  
                                &lt;option value="116" &gt;AU [NWC] NEW CASTLE&lt;/option&gt;
  
                                &lt;option value="65" &gt;AU [PTK] PORT KEMBLA&lt;/option&gt;
  
                                &lt;option value="95" &gt;AU [SYD] SYDNEY&lt;/option&gt;
  
                                &lt;option value="102" &gt;AU [WEL] WELLINGTON&lt;/option&gt;
  
                                &lt;option value="5" &gt;BL [ANT] ANTOFAGASTA&lt;/option&gt;
  
                                &lt;option value="8" &gt;BL [ARI] ARICA&lt;/option&gt;
  
                                &lt;option value="110" &gt;BR [ANG] ANGRA DOS REIS&lt;/option&gt;
  
                                &lt;option value="7" &gt;BR [ARA] ARATU&lt;/option&gt;
  
                                &lt;option value="86" &gt;BR [SEP] ITAGUAI&lt;/option&gt;
  </code></pre>