title: CSS Margin and Absolute property
body: <p>I want to use margin in my code, but I have some problems.
  Please look at:</p>
  
  <pre><code>&lt;div id="outer"&gt;
  &lt;div id="inner1"&gt;
      Margin not coming from top (not absolute)
  &lt;/div&gt;
  
  &lt;div id="inner2"&gt;
      Div has absolue prop
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>And the CSS code is:</p>
  
  <pre class="lang-css prettyprint-override"><code>#outer {
      margin: 100px;
      background-color: green;
      height: 300px;
      widht: 400px;
  }
  
  #inner1 {
      margin: 10px;
      background-color: red;
  }
  
  #inner2 {
      position: absolute;
      margin: 20px;
      background-color: blue;
  }
  </code></pre>
  
  <p>​</p>
  
  <ol>
  <li><p>I am not able to understand why setting position to absolute is
  restricting width of <code>#inner2</code> div.</p></li>
  <li><p>Since <code>#inner1</code> div does not have absolute property, it is not having
  margin from top. I can't understand this. Please explain.</p></li>
  </ol>
  
  <p>Here is output: <a href="http://jsfiddle.net/blunderboy/C7dE2/1/" rel="nofollow"><strong>jsFiddle</strong></a></p>