[css] CSS Positioning Elements Next to each other

I wondering if you can help me position two divs, mainContent and sideContent next to each other?

HTML:

<div id='main'>
  <div id='mainContent'>
  </div>
  <div id='sideContent'>   
  </div>
</div>

CSS: #

#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;}

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?

Try float property. Here's an example: http://jsfiddle.net/mLmHR/