title: Keeping floated divs inside page constraints
body: <p>I'm not sure if this can be done without javascript, but I hope it has a solution.
  Consider this fiddle: <a href="http://jsfiddle.net/PPeYH/" rel="nofollow">http://jsfiddle.net/PPeYH/</a></p>
  
  <pre><code>* {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  .content {
      border: 1px solid;
      min-height: 3em;
  }
  .container {
      max-width: 600px;
      margin: 0 auto;
      overflow: hidden;
      clear: both;
  }
  #placeholder-body {
      position: relative;
      border: 0;
  }
  .split-tile {
      float: left;
  }
  .split-left {
      width: 60%;
  }
  .split-left .content {
      margin-left: auto;
      margin-right: 0;
      max-width: 360px;
  }
  .split-right {
      width: 40%;
  }
  .split-right .content {
      margin-left: 0;
      margin-right: auto;
      max-width: 240px;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div&gt;&lt;div class="content container"&gt;Header&lt;/div&gt;&lt;/div&gt;
  &lt;div id="placeholder-body"&gt;
      &lt;div&gt;&lt;div class="content container"&gt;Some content&lt;/div&gt;&lt;/div&gt;
  
      &lt;div class="tile-1 split-tile split-left"&gt;
          &lt;div class="content"&gt;60% width.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tile-2 split-tile split-right"&gt;
          &lt;div class="content"&gt;40%&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;&lt;div class="content container"&gt;Some content&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;div class="content container"&gt;Footer&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The structure you see here, is a simplified version of a RWD structure. We need the entire layout to stay inside it's boundaries. If you change the browser width up or down, you will see that the divs marked "60%" and "40%" do not respect the boundaries of the rest of the divs.</p>
  
  <p>"Why don't you just wrap the 60% and 40% divs in a container?", you might ask. 
  Well, the DOM structure presented here is laid out using a CMS in an already complex system. It would require more than just a little refactoring to change this. I will have to live with the tiles being laid out the way they are. </p>
  
  <p>So my question is this; is there a way to achieve a 60/40 split on the middle divs in such a way that they will keep to the left and right edges of the rest of the layout, using ONLY css? </p>
  
  <p><strong>UPDATE:</strong>
  I cannot constrain the #placeholder-body to a max-width either, because my designer wants me to make full-width background colors to some of the divs in the structure. </p>