title: JSP float left out of alignment by 1 tab when Latin characters followed by CJK
body: <p>Float: left combined with a change from Latin to CJK appears to cause a tab to be inserted at the start of the next div so the CJK characters in the label float to the first tab position rather than to the left margin causing the div to be misaligned. </p>
  
  <p>Has anyone experienced  similar problem and found a solution?</p>
  
  <p>Refer: <a href="https://jsfiddle.net/90jvnd4v/" rel="nofollow">https://jsfiddle.net/90jvnd4v/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;div class="parent"&gt;
    &lt;div class="child"&gt;
      &lt;label for="data2"&gt;aaa :&lt;/label&gt;
      &lt;div id="data2" class="child"&gt;
        16. 1. 12
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="child"&gt;
      &lt;label for="data2"&gt;기한 :&lt;/label&gt;
      &lt;div id="data2" class="child"&gt;
        16. 2. 13
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;div class="child"&gt;
      &lt;label for="data3"&gt;기한 :&lt;/label&gt;
      &lt;div id="data3" class="child"&gt;
        16. 2. 14
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#parent {
    text-align: left;
    display: block;
  }
  
  #child {
    text-align: left;
    display: block;
  }
  
  label {
    width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    margin-left: 5px;
    margin-riht: 5px;
    margin-top: 0px;
  }
  </code></pre>