<p>The below HTML/CSS/Javascript (jQuery) code displays the <code>#makes</code> select box. Selecting an option displays the <code>#models</code> select box with relevant options. The <code>#makes</code> select box sits off-center and the <code>#models</code> select box fills the empty space when it is displayed. </p>

<p>How do you style the form so that the <code>#makes</code> select box is centered when it is the only form element displayed, but when both select boxes are displayed, they are both centered within the container?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var cars = [
  {
    "makes"  : "Honda",
    "models"  : ['Accord','CRV','Pilot']
  }, 
  {
    "makes"   :"Toyota",
    "models"  : ['Prius','Camry','Corolla']
  }
];

$(function() {
  vehicles = [] ;
  for(var i = 0; i &lt; cars.length; i++) {
    vehicles[cars[i].makes] = cars[i].models ;
  }
  var options = '';
  for (var i = 0; i &lt; cars.length; i++) {
    options += '&lt;option value="' + cars[i].makes + '"&gt;' + cars[i].makes + '&lt;/option&gt;';
  }
  $("#make").html(options);   // populate select box with array

  $("#make").bind("click", function() {
    $("#model").children().remove() ;   // clear select box
    var options = '';
    for (var i = 0; i &lt; vehicles[this.value].length; i++) {
      options += '&lt;option value="' + vehicles[this.value][i] + '"&gt;' +
        vehicles[this.value][i] +
        '&lt;/option&gt;';
    }
    $("#model").html(options);   // populate select box with array
    $("#models").addClass("show");
  });     // bind end
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide {
  display: none;
}
.show {
  display: inline;
}
fieldset {
  border: #206ba4 1px solid;
}
fieldset legend {
  margin-top: -.4em;
  font-size: 20px;
  font-weight: bold;
  color: #206ba4;
}
fieldset fieldset {
  position: relative;
  margin-top: 25px;
  padding-top: .75em;
  background-color: #ebf4fa;
}
body {
  margin: 0;
  padding: 0;
  font-family: Verdana;
  font-size: 12px;
  text-align: center;
}
#wrapper {
  margin: 40px auto 0;
}
#myFieldset {
  width: 213px;
}
#area {
  margin: 20px;
}
#area select {
  width: 75px;
  float: left;
}
#area label {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  color: #000;
}
#area #selection {
  display: block;
}
#makes {
  margin: 5px;
}
#models {
  margin: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="wrapper"&gt;
  &lt;fieldset id="myFieldset"&gt;
    &lt;legend&gt;Cars&lt;/legend&gt;
    &lt;fieldset id="area"&gt;
      &lt;label&gt;Select Make:&lt;/label&gt;
      &lt;div id="selection"&gt;
        &lt;div id="makes"&gt;
          &lt;select id="make"size="2"&gt;&lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="hide" id="models"&gt;
          &lt;select id="model" size="3"&gt;&lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/fieldset&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

[{'answer_id': 61009, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>Floating the select boxes changes their display properties to "block". If you have no reason to float them, simply remove the "float: left" declaration, and add "text-align: center" to #makes and #models.</p>\n'}, {'answer_id': 61029, 'author': 'Nick Higgs', 'author_id': 3187, 'author_profile': 'https://Stackoverflow.com/users/3187', 'pm_score': 2, 'selected': True, 'text': '<p>It\'s not entirely clear from your question what layout you\'re trying to achieve, but judging by that fact that you have applied "float:left" to the select elements, it looks like you want the select elements to appear side by side. If this is the case, you can achieve this by doing the following:</p>\n\n<ul>\n<li>To centrally align elements you need to add "text-align:center" to the containing block level element, in this case  #selection.</li>\n<li>The position of elements that are floating is not affected by "text-align" declarations, so remove the "float:left" declaration from the select elements.</li>\n<li>In order for the #make and #model divs to sit side by side with out the use of floats they must be displayed as inline elements, so add "display:inline" to both #make and #model (note that this will lose the vertical margin on those elements, so you might need to make some other changes to get the exact layout you want).</li>\n</ul>\n\n<p>As select elements are displayed inline by default, an alternative to the last step is to remove the #make and #model divs and and apply the "show" and "hide" classes to the model select element directly.</p>\n'}]
['https://Stackoverflow.com/questions/60944', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2755/']