title: CSS @media print not working at all
body: <p>I'm struggling for hours now why the @media print is not working, I search on Google even on this site and nothing helped, so that's why I post this question.
  I'm testing it on Google chrome print preview (ctrl p) but i also printed to page and it stays blank.</p>
  
  <p>I try'd to make a separate css file and also a embedded css style into the page.</p>
  
  <p>Here is my code</p>
  
  <p>Headers</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/print.css" media="print" /&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="bruikleenovereenkomst"&gt;
      &lt;div id="blo_header"&gt;
  
      &lt;/div&gt;
  
      &lt;div id="blo_side_top"&gt;&lt;/div&gt;
      &lt;div id="blo_side_bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p>CSS normal styles</p>
  
  <pre><code>div#bruikleenovereenkomst {
      width:595px;
      height:842px;
      background-color:#fff;
      position:relative;
  }
  
  div#blo_header {
      width:100%;
      height:125px;
      background-color:#FBE983;
      z-index:9
  }
  
  div#blo_side_top {
      width:57px;
      height:420px;
      background-color:#B6CAE5;
      position:absolute;
      right:0;
      top:0;
      z-index:99;
  }
  
  div#blo_side_bottom {
      width:57px;
      height:420px;
      background-image:url(../images/leaflet.png);
      background-repeat:no-repeat;
      position:absolute;
      right:0;
      bottom:0;
      z-index:99;
  }
  </code></pre>
  
  <p>CSS print styles (print.css) note: the div#bruikleenovereenkomst is just a black block for testing.</p>
  
  <pre><code>@media print{
  
      body {
          margin:0;
      }
  
      h1#logo {
          display:none;
      }
  
      ul#menu {
          display:none;
      }
  
      div#bruikleenovereenkomst {
          width:100%;
          height:500px;
          background-color:#000;
      }
  
      div#blo_header {
          display:none;
      }
  
      div#blo_side_top {
          display:none;
      }
  
      div#blo_side_bottom {
          display:none;
      }
  
  }
  </code></pre>
  
  <p>All I get with printing is just a blank page.</p>