title: How do i make wrapper div correctly wrap divs inside of it?
body: <p>look, here are my html and css.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link type="text/css" rel="stylesheet" href="stylesheets2.css" /&gt;
  &lt;/head&gt;        
      &lt;body&gt;
          &lt;div id="wrapper"&gt;
              &lt;div id="cont1"&gt;&lt;/div&gt;
              &lt;div id="cont2"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>*{
      border:none;
  }
  #wrapper{
      display:inline-block;
      background-color:lightcyan;
      position:absolute;
      top:200px;
      left:300px;
      background-color:lightyellow;
      border:1px solid green;
      }
  #cont1{
      position:absolute;
      width:100px;
      height:50px;
      background-color:red;
  }
  #cont2{
      position:absolute;
      width:50px;
      height:100px;
      background-color:red;
  }
  </code></pre>
  
  <p>1. How to make the wrapper div wrap these rectangles so it would have 100x100 size?
  note that it's undesirable to define the size of wrapper directly (height/width) because later sizes of inner divs may be modified</p>