title: How do I center a div and make it expand around the divs inside of it?
body: <p>I have a page that I want centered, with a background and a border around the entire content.</p>
  
  <p>I made a div and set it with the background color and the border settings I want.</p>
  
  <p>Problem is that it has divs inside it that float and the background does not stretch around the floating divs. The only way I was able to get it to work was by setting position:absolute. Then the border did expand around the floating divs but I was unable to center them using regular html/css. </p>
  
  <p>I found a javascript hack to make it center but it only centers after the page loads and it looks bad.</p>
  
  <p>I am sure there is a way to have the container expand and still have it centered, I just can't figure it out.</p>
  
  <p>here is a sample html page that shares my problems</p>
  
  <pre><code>&lt;div style="background-color: Red; width: 980px; position: absolute;" id="container"&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div style="width: 400px; background-color: Black; float: left;"&gt;
          &lt;br /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
      &lt;div style="width: 400px; background-color: Blue; float: left;"&gt;
          &lt;br /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the Javascript that makes it work (uses Jquery)</p>
  
  <pre><code>$(function() {
          var winH = $(window).height();
          var winW = $(window).width();
          $("#container").css('left', winW / 2 - $("#container").width() / 2);
      });
  </code></pre>
  
  <p>There has got to be a better way.</p>
  
  <p>Thanks</p>