title: How to make two divs side by side using inline-block?
body: <p>How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.</p>
  
  <p>HMTL </p>
  
  <pre><code>&lt;div id="maincontainer"&gt;
  &lt;div id="leftcolumn"&gt;&amp;nbsp;&lt;/div&gt;
  
  &lt;div id="contentwrapper"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>#maincontainer {
      width:100%;
      height: 100%;
  }
  
  #leftcolumn {
      display:inline-block;
      width: 100px;
      height: 100%;
      background: blue;
  }
  
  #contentwrapper {
      display:inline-block;
      width:100%;
      height: 100%;
      background-color: red;
  }
  </code></pre>
  
  <p>JSFIDDLE <strong><a href="http://jsfiddle.net/A5HM7/" rel="noreferrer">http://jsfiddle.net/A5HM7/</a></strong></p>