title: using CSS to center FLOATED input elements wrapped in a DIV
body: <p>There's no shortage of questions and answers about centering but I've not been able to get it to work given my specific circumstances, which involve floating.</p>
  
  <p>I want to center a container DIV that contains three floated input elements (split-button, text, checkbox), so that when my page is resized wider, they go from this:</p>
  
  <pre><code>  ||.....[      ][v]     [            ]       [ ] label .....||
  </code></pre>
  
  <p>to this</p>
  
  <pre><code>  ||......................[      ][v]     [            ]       [ ] label.......................||
  </code></pre>
  
  <p>They float fine, but when the page is made wider, they stay to the left:</p>
  
  <pre><code>  ||.....[      ][v]     [            ]       [ ] label .......................................||
  </code></pre>
  
  <p>If I remove the float so that the input elements are stacked rather than side-by-side:</p>
  
  <pre><code>  [      ][v]   
    [            ]  
    [ ] label
  </code></pre>
  
  <p>then they DO center correctly when the page is resized.  SO it is the float being applied to the elements of the DIV#hbox inside the container that is messing up the centering.  <strong>Is what I want to do impossible because of the way float is designed to work?</strong> </p>
  
  <p>Here is my DOCTYPE, and the markup does validate at w3c:</p>
  
  <pre><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  </code></pre>
  
  <p>Here is my markup:</p>
  
  <pre><code> &lt;div id="term1-container"&gt;
   &lt;div class="hbox"&gt;
      &lt;div&gt;
          &lt;button id="operator1" class="operator-split-button"&gt;equals&lt;/button&gt;
          &lt;button id="operator1drop"&gt;show all operators&lt;/button&gt;
      &lt;/div&gt;
      &lt;div&gt;&lt;input type="text" id="term1"&gt;&lt;/input&gt;&lt;/div&gt;
      &lt;div&gt;&lt;input type="checkbox" id="meta2"&gt;&lt;/input&gt;&lt;label for="meta2" class="tinylabel"&gt;meta&lt;/label&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the (not-working) CSS:</p>
  
  <pre><code>  #term1-container {text-align: center}
    .hbox {margin: 0 auto;}
    .hbox div {float:left; }
  </code></pre>
  
  <p>I have also tried applying <strong>display: inline-block</strong> to the floated button, text-input, and checkbox; and even though I think it applies only to text, I've also tried applying <strong>white-space: nowrap</strong> to the #term1-container DIV, based on posts I've seen here on SO.</p>
  
  <p>And just to be a little more complete, here's the jQuery that creates the split-button:</p>
  
  <pre><code>$(".operator-split-button").button().click( function() {
  alert( "foo" );
  }).next().button( {
  text: false,
  icons: {
     primary: "ui-icon-triangle-1-s"
      }
  }).click( function(){positionOperatorsMenu();} )
  })
  </code></pre>