title: Position box-shadow width specific width
body: <p>I Try to add a shadow to a div element. But only to 90% of the width from the div and with margin-left from 10% . This was try</p>
  
  <pre><code>&lt;div id="post-headline"&gt;
      &lt;div id="post-headline-date"&gt;33.12&lt;/div&gt;
      &lt;div id="post-headline-title"&gt;&lt;?php the_title(); ?&gt;&lt;/div&gt;       
      &lt;div id="post-headline-author"&gt;&lt;?php the_author(); ?&gt;&lt;/div&gt;
      &lt;div id="shadow"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#shadow{
    position:relative;
    height:5px;
    z-index:0;
    width:96%;
    left:3.7%;
    top:-6px;
    -moz-box-shadow: 0px 5px 4px #888;
    -webkit-box-shadow: 0px 5px 4px #888;
    box-shadow: 0px 5px 4px #888;
  }
  </code></pre>
  
  <p>But it seems the percent values does not belong to the size of "post-headline". On different screen resolutions has it different values. What am I doing wrong?</p>
  
  <p>Example: 
  res1:</p>
  
  <ul>
  <li>---------------- headline</li>
  <li>------------      shadow</li>
  </ul>
  
  <p>res2:</p>
  
  <ul>
  <li>---------------- headline</li>
  <li>----------------- shadow</li>
  </ul>
  
  <p><strong>UPDATE</strong>
  My CSS</p>
  
  <pre><code>#post-headline {
  position:relative;
      background-color: #3366cc;
      color:#fff;
      left:-60px;
      height: 40px;
      width: 106.5%;
      z-index:1;
  }
  
  #post-headline:after{
    content: " ";
    position:absolute;
    width: 95.7%;
    right: 0;  
    bottom: 0;
    height: 20px;
    -moz-box-shadow: 0px 5px 4px #888;
    -webkit-box-shadow: 0px 5px 4px #888;
    box-shadow: 0px 5px 4px #888;
  }
  
  #post-headline-title {
      margin-left: 60px;
  }
  
  #post-headline-author{
  font-weight:bold;
  margin-left:60px;
  }
  
  #post-headline-date{
  position:absolute;
  margin:8px;
  font-weight:bold;
  font-size:12px;
  }
  
  #post-headline-triangle
  {
      z-index:-1;
      left: -51.7px;
      top:-31px;
      height:45px;
      width:45px;
      background-color:#0033cc;
      transform: rotate(30deg);
      -ms-transform: rotate(30deg); /* IE 9 */
      -webkit-transform: rotate(30deg); /* Safari and Chrome */
   }
  </code></pre>
  
  <p>My PHP</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
    &lt;div id="post-headline"&gt;
      &lt;div id="post-headline-date"&gt;33.12&lt;/div&gt;
      &lt;div id="post-headline-title"&gt;&lt;?php the_title(); ?&gt;&lt;/div&gt;       
      &lt;div id="post-headline-author"&gt;&lt;?php the_author(); ?&gt;&lt;/div&gt; 
    &lt;/div&gt;
  &lt;div id="post-headline-triangle"&gt;&lt;/div&gt;
            ...
        &lt;?php endwhile;endif; ?&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>Is still not working :/</p>