title: How (and why) to use display: table-cell (CSS)
body: <p>I have a site with a <strong>very</strong> active background (I'm talking 6 or so different z-indexes here 2 with animations). I wanted a  in the foreground that had content but wanted a "window" through to the background in it. Some problems I had:</p>
  
  <ol>
  <li><p>you can't "punch a hole" in a background, so...</p>
  
  <ul>
  <li>I built a containing div, lets call it "srminfo"</li>
  <li>Inside that I had a "top", "left", "window", "right" and "bottom"</li>
  <li>the top, left, right, bottom all had opaque white backgrounds</li>
  <li>while the srminfo and window divs had background:none;</li>
  </ul></li>
  <li><p>No matter how hard I tried, the "right" div wouldn't fill the space between the "top" and "bottom" divs, I tried a lot of different things. The reason it had to be dynamic is that the text in the "left" div was dynamic based on the background colour, which was itself generated randomly with JavaScript.</p></li>
  </ol>
  
  <p>How is display: table; and all the other related CSS code like tables? And how can it be used?</p>