title: Element with fixed position and display table
body: <p>I want to have an element with fixed position relatively to the four sides of the window and with <code>display:table</code>.</p>
  
  <p>But if I try to give to my div both the <code>position:fixed</code> and <code>display:table</code> properties, then the <code>right</code> and <code>bottom</code> properties are ignored.</p>
  
  <p>I can attain my goal with an additional wrapper :</p>
  
  <pre><code>&lt;div id=w&gt;
    &lt;div id=a&gt;
      &lt;div id=b&gt;B&lt;/div&gt;
      &lt;div id=c&gt;C&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  #w {
     position: fixed;
     top: 40px; left:40px; right: 40px; bottom: 40px;
  }
  #a{
    display: table;
    width:100%; height:100%;
  }
  #b {
    display: table-row;
    background: red;
    height:40%;
  }
  #c {
    display: table-row;
    background: yellow;
  }
  </code></pre>
  
  <p><strong><a href="http://jsbin.com/EYAXuZo/1/edit" rel="nofollow">Working Fiddle</a></strong></p>
  
  <p>But I don't like to have useless divs in my HTML. Is there a way to do it without that <code>#w</code> div ? The HTML should be</p>
  
  <pre><code>  &lt;div id=a&gt;
      &lt;div id=b&gt;B&lt;/div&gt;
      &lt;div id=c&gt;C&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>(CSS tricks like <code>:before</code> pseudo elements would be fine).</p>
  
  <p>The solution must work on IE9+, Firefox and Chrom(e|ium).</p>