title: Rotate text -90deg and vertically align with div
body: <p>I'm attempting to vertically align text that has been rotated by -90deg and not having much luck. Code below</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="page_block" style="background: &lt;?php echo $background; ?&gt;;"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-1"&gt;
              &lt;div id="header"&gt;
                  &lt;h1 class="verticaltext"&gt;
                      &lt;?php echo $page-&gt;post_title; ?&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-11"&gt;
              &lt;p&gt;&lt;?php echo $page-&gt;post_content; ?&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.page_block {
      margin:0px;
      padding:10px;
  }
  #header { 
      position: relative; 
  }
  .verticaltext {
      transform: rotate(-90deg);
      transform-origin: right, top;
      -ms-transform: rotate(-90deg);
      -ms-transform-origin:right, top;
      -webkit-transform: rotate(-90deg);
      -webkit-transform-origin:right, top;
  
      position: absolute; bottom: 0%; left: 0%;
      color: #ed217c;
  }
  </code></pre>
  
  <p>The result is <a href="http://i.stack.imgur.com/0t8h0.jpg" rel="noreferrer">like</a>.
  This is a Wordpress theme, with Twitter Bootstrap implemented as well as a full width slider. I have confirmed that both Bootstrap and the Slider do not contain conflicting CSS.</p>