title: Problem aligning divs next to each other?
body: <p>I want this design: </p>
  
  <pre><code>DIV1: auto-size DIV2: 160px
  divnumberonediv divtwo
  divnumberonediv divtwo
  divnumberonediv divtwo
  divnumberonediv divtwo
  divnumberonediv divtwo
  divnumberonediv divtwo
  </code></pre>
  
  <p>How do I solve this problem? I've tried stuff like floating left &amp; right, but I just can't get them on the same line.</p>
  
  <p>I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;style="text/css"&gt;
  #mainbulk {
      padding: 1.5em 2% 1.5em .5em;
  }
  #ads {
      width: 7.5em;
      float: left;
      display: table-cell;
  padding: 0 0 0 2em;
  }
  #textcontent {
      width: 70%;
      float: left;
      display: table-cell;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="mainbulk"&gt;
      &lt;div id="textcontent"&gt;
          &lt;p&gt;This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="ads" align="right"&gt;
      ads would, hypothetically, be placed here if this were actually an actual website.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>I'm encountering this problem:</p>
  
  <p><a href="http://www.screencast-o-matic.com/watch/c6lrXsXyQ" rel="nofollow">http://www.screencast-o-matic.com/watch/c6lrXsXyQ</a></p>