title: How float divs inside a td
body: <p>I have two pages with almost the same code. Both have this CSS code and the two divs:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .visfarve { position:relative; float:left; padding:5px; border:1px solid #666; }
  .farver { border:1px solid black; width:75px; height:10px; }
  .valgtfarve { width:95px; height:15px; display:block; background-color:white; text-align:center; }
  &lt;/style&gt;
  
  &lt;div id="vis" style="display:block; font-size:11px;"&gt;
    &lt;a href="javascript:colors(1);"&gt;Vis farver&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="skjul" style="display:none; font-size:11px;"&gt;
    &lt;a href="javascript:colors(0);"&gt;Skjul farver&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>One page then has this construct:</p>
  
  <pre><code>&lt;table style="width:730px;"&gt;
    &lt;tr&gt;
      &lt;td width="510px"&gt;
        &lt;div id="visfarve" style="display:none; margin-top:11px;"&gt;&amp;npsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td id="viser" style="border-radius:10px; width:220px; height:inherit"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The other page has this obstruction:</p>
  
  <pre><code>&lt;div id="visfarve" style="display:none; margin-top:11px;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div id="viser" style="margin-top:50px; border-radius:10px; display:none;"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>They share these two js functions:</p>
  
  <pre><code>var farve1 = ["3D3D34","463834","3F383D","433839","333F44","3B3B40","38413D","304344","483C33","313F48","37463B","35453F"];
  var farve2 = ["S8505-Y20R","7812-Y87R","S8010-R30B","S8010-R10B","8108-R93B","8207-R38B","S8502-G","S8010-B30G","S8010-Y70R","S8010-R90B","S8010-G10Y","S8010-B90G"];
  
  function colors(vis) {
    var setheight = 0;
    for(i=farve1.length-1;i&gt;-1;i--) { skriv += "&lt;div class='visfarve' onmouseover=\"document.getElementById('viser').style.background = '#" + farve1[i] + "';\" onmouseout=\"document.getElementById('viser').style.background = 'white';\" onclick='valgtfarve(\"" + farve2[i] + "\",\"#" + farve1[i] + "\");'&gt;&lt;table&gt;&lt;tr&gt;&lt;td class='farver' title='Klik for at vælge' style='background-color:#" + farve1[i] + ";'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;p&gt;" + farve2[i] + "&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;"; setheight += 10; }
    document.getElementById('visfarve').innerHTML = skriv;
  
    if(vis) { 
      document.getElementById('vis').style.display = "none";
      document.getElementById('skjul').style.display = "block"; 
      document.getElementById('visfarve').style.display = "block";
      document.getElementById('viser').style.display = "block";
      document.getElementById('viser').style.height = setheight + "px";
    }
    else {
      document.getElementById('vis').style.display = "block";
      document.getElementById('skjul').style.display = "none";
      document.getElementById('visfarve').style.display = "none";
      document.getElementById('viser').style.display = "none";
      document.getElementById('viser').style.height = 0 + "px";
    }
  }
  
  function valgtfarve(kode, farve) {
    if(!valgt) { 
      if(confirm("Tones en maling kan den ikke returneres.\nAccepter fraskrivelse af returret for tonet maling?")) { valgt = true; } 
      else {
        document.getElementById('vis').style.display = "block";
        document.getElementById('skjul').style.display = "none";
        document.getElementById('viser').style.height = "0px";
        document.getElementById('visfarve').style.display = "none"; return false;
      }}
    document.getElementById('valgtfarve').value = kode;
    document.getElementById('valgtfarve').style.backgroundColor = farve;
  }
  </code></pre>
  
  <p>When I use the div construct the floating divs lies niceley next to each other with 5 divs in each line and breaks when the container div edge is reached. However, inside the td the divs insists on each having the full width of the td - resulting in only one div per line.</p>
  
  <p>How do I get divs inside a td to keep width and float left?</p>