title: a div in a container with a background that stretches to infinity
body: <p>I've got a design idea that I'm not exactly sure the best way to go about pulling it off in html and css. Basically I want to do what I've (crudely) drawn in this image:</p>
  
  <p><img src="https://i.stack.imgur.com/wPis5.gif" alt="Crappy design idea"></p>
  
  <p>My basically I want a div to appear some distance down from the top of the page that stretches from infinity, to within the bounds of the container to display some content.  My code looks something like this</p>
  
  <pre><code># html
  &lt;html&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
  
        &lt;div id="content"&gt;
          Some text content
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  # css
  div#container {
    width: 1140px;
    margin: 0 auto;
  }
  
  div#content {
    width: 300px;
    background: #000;
    color: #fff;
    float: left;
  }
  </code></pre>
  
  <p>Where the div#content would be the one that has the background that stretches to infinity.  Is this possible to pull off without resorting to altering the background of the  tag? I want to use this on multiple pages within my site, all of which have different heights and distances down from the top, so I'd like to be able to do it without having to switch out the background images for the  tags for these different pages. And the div#content will have variable content length, so using body background images isn't a very elegant solution.  It would be nice to do it without resorting to some kind of absolute positioning as well.</p>
  
  <p>Sorry for rambling, I hope what I am trying to do is clear.  Any suggestions?</p>