title: How can I control the width of a <div> with display:table; with a <p> element inside with display:table-cell
body: <p>I have a layout, where I have to make a vertical centeret, with a rotated text inside.
  See fiddle: <a href="http://jsfiddle.net/C7mCc/3/" rel="nofollow">http://jsfiddle.net/C7mCc/3/</a>
  I use <code>display:table;</code> and <code>display:table-cell;</code> to make the vertical centering, which is working good. 
  The HTML</p>
  
  <pre><code>&lt;div id="top-banner-advertising-text" class="v-center"&gt;
   &lt;p class="v-c-content"&gt;Annonce&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.v-center {
      display: table;
  }
  
  .v-center .v-c-content {
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>But I only want the <code>#top-banner-advertising-text</code> to have a width of 15px. Like in this fiddle: <a href="http://jsfiddle.net/C7mCc/4/" rel="nofollow">http://jsfiddle.net/C7mCc/4/</a> where I have removed the <code>.v-center</code> and <code>.v-c-content</code> and therefore do not have the text vertical centered.</p>
  
  <p>How can I control the width of the div?</p>