title: CSS rotate moves DIV from side of page
body: <p>I'm trying to create a side tag, as found here in it basic form. <a href="http://www.firstforturf.co.uk/quotation.php" rel="nofollow">http://www.firstforturf.co.uk/quotation.php</a></p>
  
  <p>I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem. </p>
  
  <p>Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working. </p>
  
  <p>If it helps, here are the CSS rules for sidetag. </p>
  
  <pre class="lang-css prettyprint-override"><code>    color: #FFF;
      height: 50px;
      width: 200px;
      position: fixed;
      background-color: rgb(0,102,204);
      font-size: 32px;
      line-height: 50px;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      text-align: center;
      top: 50%;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      writing-mode: tb-rl;
  </code></pre>
  
  <p>Greatful if anyone could help. Cheers.</p>