title: Floating Second Element Right w/o Specifying Width of First?
body: <p>(Apologies for the title. The problem is much more easily demonstrated than named.)</p>
  
  <p>I have two elements: a content container (#content) and an ads container (#ads).  The content container will be on every page of a site.  The ads will be on some pages and are of a fixed width.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
  
      &lt;style type="text/css" media="screen"&gt;
  
          * {
              margin: 0;
              padding: 0;
          }
  
          #container {
              width: 800px;
              border: 1px solid blue;
          }
  
          #ads {
              float: right;
              border: 1px solid lime;
          }
  
          .ad {
              width: 100px;
              height: 100px;
              background: gray;
          }
  
          #content {
              overflow: hidden;
              border: 1px solid red;
          }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="container"&gt;
  
          &lt;ul id="ads"&gt;
              &lt;li class="ad"&gt;Buy Coke&lt;/li&gt;
              &lt;li class="ad"&gt;No, Buy Pepsi!&lt;/li&gt;
              &lt;li class="ad"&gt;Coke bought more ad space&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div id="content"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(Alright, I admit that this isn't <em>really</em> my code, but the content/ads simplification makes my question a lot more straightforward.) </p>
  
  <p>What I have here is basically a perfect setup in that it allows for the #ads list to be removed, and the #content to naturally reflow to take up its space.  Furthermore, I have not specified the width of #content anywhere in the stylesheet.  This offers an extra degree of flexibility: the layout can be used with a container of any width.</p>
  
  <p>But I'm a perfectionist; I don't want the ads to come before the content in source order.</p>
  
  <p>My question: is there a way to accomplish this layout that satisfies the following requirements:</p>
  
  <ul>
  <li>#ads follows #content in the source</li>
  <li>Removing #ads from the source results in #content taking up the entire width of its parent (#container) without CSS changes</li>
  <li>The width of #content is not explicitly written into the CSS (i.e. The only change needed to make the page wider is to modify #container's width)</li>
  </ul>