title: CSS Positioning Elements Next to each other
body: <p>I wondering if you can help me position two divs, mainContent and sideContent next to each other?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='main'&gt;
    &lt;div id='mainContent'&gt;
    &lt;/div&gt;
    &lt;div id='sideContent'&gt;   
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:
  #</p>
  
  <pre><code>#main { width: 100%; min-height: 400px;
      background: #0A3D79; /* for non-css3 browsers */
      background: -webkit-gradient(linear, left top, left bottom, from(rgb(20,114,199)), to(rgb(11,61,122))); /* for webkit browsers */
      background: -moz-linear-gradient(top,  rgb(20,114,199),  rgb(11,61,122));} /* for firefox 3.6+ */
      /*gradient code from http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient*/
  
      #mainContent { width: 75%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: blue; }
      #sideContent { width: 22%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: red; border-style: solid; border-left-width: 3px;  border-left-color: white;border-right-width:0px;border-top-width:0px;border-bottom-width:0px;}
  </code></pre>
  
  <p>I included all of the css because I wasn't sure what exactly would have an effect on this kind of thing. Also, I've tried making sideContent and mainContent display inline but they just seem to disappear. Any idea why?</p>