title: CSS Problem to make 2 divs float side by side
body: <p>I would like 2 divs, which are within a container div, to appear side-by-side.  However the second one wraps for some reason.  The 2nd div promo is below and to the right the 1st div slideshow.  The margin seems correct, but I want these two divs to appear side-by-side.</p>
  
  <p>I've tried some of the suggestions on here but they do not work.</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#top-feature {
  background: red;
  height: 320px;
  width: 897px;
  margin: 11px 0 0 0;
  /*padding: 10px 0 0 10px;*/
  position: relative;
  text-align: left;
  }
  
  #slideshow {
  height: 300px;
  width: 548px;
  margin: 0 0 0 0;
  background: blue;
  }
  
  #promo {
  height: 100px;
  width: 200px;
  margin: 0 0 0 569px;
  background: green;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
      &lt;div id="top-feature"&gt;
          &lt;div id="slideshow"&gt;
          &lt;/div&gt;
          &lt;div id="promo"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>