title: CSS text stroke outside of letters
body: <p>Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.</p>
  
  <p>So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.</p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div class="hcontainer"
      &lt;h2&gt;A Framework For Web Artisans&lt;/h2&gt;
      &lt;span class="h2white"&gt;A Framework For Web Artisans&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS like this:</p>
  
  <pre><code>h2{font-size:2em; 
  margin: 10px 0;
  color:#234F70;
  -webkit-text-stroke: 10px #531A16;
  -webkit-text-fill-color:#FFF;
  letter-spacing:-2px;
  position:absolute; 
  top:10px; 
  left:0px;}
  
  .h2white{font-family:dom_bold,arial black;
  font-size:2em; 
  margin: 10px 0;
  color:#FFF;
  position:relative; 
  top:10px; left:0px;
  letter-spacing:-2px;
  position:absolute;}
  
  .hcontainer{position:relative;clear:both;height:2em;}
  </code></pre>
  
  <p>So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.</p>
  
  <p>I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?</p>
  
  <p><a href="http://jsfiddle.net/calder12/9M7YZ/" rel="nofollow">http://jsfiddle.net/calder12/9M7YZ/</a></p>