title: Position div inside div in top-right-corner and not use position:absolute
body: <p>I want to position a DIV in the top-right-corner inside a DIV (inside the blue area). I used <code>position:absolute</code> to illustrate, but the solution CAN NOT have <code>position:absolute</code> for the "tag" DIV because I use Masonry and this adds <code>position:absolute</code> to my grid items and when I use it also the layout upon load or re-fresh of page gets messed up for a few seconds. Is it possible to achieve my objective? Again, I cannot implement <code>position:absolute</code> for .tag.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/rabas007/hf1db9go/7/" rel="nofollow">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="article"&gt;
      &lt;article class="box"&gt;
          &lt;div class="masonry_item_inner"&gt;
              &lt;div class="blogpost"&gt;
                  &lt;img src="http://placehold.it/350x150"&gt;
              &lt;/div&gt;
              &lt;div class="tag"&gt;MY TAG HERE&lt;/div&gt;
                  &lt;div class="title"&gt;BIG Headline&lt;/div&gt;
                  &lt;div class="summary"&gt;This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about&lt;/div&gt;
          &lt;/div&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tag {
      top: 0px;
      right: 0px;
      min-height: 0px;
  }
  
  .tag {
      font-size:14px;
      font-family:'Droid Serif';
      text-align:center;
      color:#FFF;
      margin-left:15px;
      padding:6px;
      background-color:red;
      float:right;
      z-index:3;
      display:block;
      position:absolute;
  }
  
  .box {
      width: 400px;
      padding: 40px;
      background-color:blue;
  }
  
  .title {
      color:green;
      background-color:white;
      font-style:40px;
      font-weight:bold;
  }
  </code></pre>