title: CSS positioning, need some advice
body: <p>Here is my  HTML code</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div id="topleft"&gt;&lt;/div&gt;
          &lt;div id="topright"&gt;&lt;/div&gt;
          &lt;div id="bottomleft"&gt;&lt;/div&gt;
          &lt;div id="bottomright"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css code</p>
  
  <pre><code>#container{
      width: 400px;
      height: 400px;
      background-color: red;
      margin: 0 auto;
  
  }
  
  #topright{
      width: 50px;
      height: 50px;
      background-color: black;
      position: relative;
      top:0px;
      right:0px;
  }
  #topleft{
      width: 50px;
      height: 50px;
      background-color: black;
      position:relative;
      top:0px;
      left:350px;
  }
  
  #bottomright{
      width: 50px;
      height: 50px;
      background-color: black;
      position: relative;
      top:250px;
      right:0px;
  }
  #bottomleft{
      width: 50px;
      height: 50px;
      background-color: black;
      position:relative;
      top:250px;
      left:350px;
  }
  </code></pre>
  
  <p>Here is output
  <a href="http://s23.postimg.org/dhgy9mpq3/image.png" rel="nofollow">http://s23.postimg.org/dhgy9mpq3/image.png</a></p>
  
  <p>What I need to obtain, is that all 4 black square to be positioned in the corner of the red square like in this image, what should i change or add in code? THX
  <a href="http://postimg.org/image/r5kv15l5v/" rel="nofollow">http://postimg.org/image/r5kv15l5v/</a></p>