title: How to fix width of DIV that contains floated elements?
body: <p>I have a DIV container with several inner DIVs layed out by floating them all left. The inner DIVs may change width on certain events, and the containing DIV adjusts accordingly. I use float:left in the container to keep it shrunk to the width of the inner divs. I use float:left in the inner divs so the layout is clean even when their contents change.</p>
  
  <p>The catch is that I want the DIV container width and height to remain constant, UNLESS a particular event causes a change to the inner widths. Conceptually I want to use float on the inners for the layout benefit, but then I want to "fix" them so they don't float around. So if the container is 700px wide, I want it to remain so even if the user narrows the browser window. I'd like the container, and it's internal DIVs to just be clipped by the browser window.</p>
  
  <p>I sense this can all be done nicely in CSS, I just can't quite figure out how. I'm not averse to adding another container if necessary...</p>
  
  <p>Since the only desired layout changes are event-based, I am also willing to use a bit of JS. But is this necessary? (And I'm still not sure I know what to modify: container dimensions? inner floatiness? other?)</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
  
        #canvas {
          overflow:auto;   /* for clearing floats */
        }
  
        #container {
          float:left;   /* so container shrinks around contained divs */
          border:thin solid blue;
        }
  
        .inner {
          float:left;   /* so inner elems line up nicely w/o saying fixed coords */
          padding-top:8px;
          padding-bottom:4px;
          padding-left:80px;
          padding-right:80px;
        }
  
        #inner1 {
          background-color:#ffdddd;
        }
  
        #inner2 {
          background-color:#ddffdd;
        }
  
        #inner3 {
          background-color:#ddddff;
        }
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="canvas"&gt;
        &lt;div id="container"&gt;
          &lt;div id="inner1" class="inner"&gt;
          inner 1
          &lt;/div&gt;
          &lt;div id="inner2" class="inner"&gt;
          inner 2
          &lt;/div&gt;
          &lt;div id="inner3" class="inner"&gt;
          inner 3
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      cleared element
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>