title: How to place a div on the right side with absolute position
body: <p>I've a page where a dynamic message box has to be displayed without disturbing the actual page. This message box has to appear at the top right corner of the page overlapping the existing contents.</p>
  
  <p>I've tried to use <code>position: absolute</code> but then I'm unable to place it in the right corner. Also I'm unable to use <code>left</code> since I've to support responsive design from Bootstrap.</p>
  
  <p>Here is a sample markup</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;!-- Need to place this div at the top right of the page--&gt;
              &lt;div class="ajax-message"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span9"&gt;
                          &lt;div class="alert"&gt;
                              &lt;a class="close icon icon-remove"&gt;&lt;/a&gt;
                              &lt;div class="message-content"&gt;
                                  Some message goes here
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Page contents starts here. These are dynamic--&gt;
              &lt;div class="row"&gt;
                  &lt;div class="span12 inner-col"&gt;
                      &lt;h2&gt;Documents&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This message box should have a width of <code>50%</code> with respect to the <code>.container</code> and the left side of the message box should not be overlapped by it. ie we should be able to click/select the contents of the left side.</p>
  
  <p>Please find a sample <a href="http://jsfiddle.net/arunpjohny/f9hKE/">here</a>.</p>
  
  <p>Please help me to solve this problem.</p>