title: Absolute positioning element 100% width inside relative positioned container bug in webkit
body: <p>I've used this <a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/" rel="nofollow">positioning trick</a> a bit to achieve complex outcomes. I think I've come across a bug in webkit browsers which I'm struggling to understand.</p>
  
  <p>Here is the simple markup:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;
          &lt;div&gt;
              &lt;span class="cols-6"&gt;&lt;/span&gt;
          &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>and CSS:</p>
  
  <pre><code>*, *:after, *:before {
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
  }
  
  table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
  }
  tr {
      border: 1px solid #ddd;
  }
  td {
      vertical-align: top;
      padding: 0;
      height: 100px;
      border: solid #ddd;
      border-width: 1px 0 0 0;
      box-shadow: -1px 0px #ddd;
  }
  td div {
      position: relative;
  }
  td div span.cols-6 {
      position: absolute;
      width: 600%;
      height: 20px;
      background: #ccc;
  }
  </code></pre>
  
  <p>To see this in action, open up this <a href="http://jsfiddle.net/JFxqt/14/" rel="nofollow">http://jsfiddle.net/JFxqt/14/</a> in chrome. </p>
  
  <p>The displayed span is absolutely positioned inside a relative container. As the table uses fixed layout, its cells are all fixed width, hence a child should be able to make use of a percentage width. The table has 7 columns while the span's width is set to 600% (i.e. 6 columns * 100%). It fails to cover all 6 columns in webkit browsers. Firefox and IE renders fully across all specified columns. </p>
  
  <p>Ideally setting the span's width to 100% should render across 1 column, 200% across 2 columns and so on.</p>
  
  <p>Anyone have any ideas or workarounds?</p>