javascript - What are the CSS secrets to a flexible/fluid HTML form? -

the below html/css/javascript (jquery) code displays #makes select box. selecting option displays #models select box relevant options. #makes select box sits off-center , #models select box fills empty space when displayed.

how style form #makes select box centered when form element displayed, when both select boxes displayed, both centered within container?

var cars = [    {      "makes"  : "honda",      "models"  : ['accord','crv','pilot']    },     {      "makes"   :"toyota",      "models"  : ['prius','camry','corolla']    }  ];    $(function() {    vehicles = [] ;    for(var = 0; < cars.length; i++) {      vehicles[cars[i].makes] = cars[i].models ;    }    var options = '';    (var = 0; < cars.length; i++) {      options += '<option value="' + cars[i].makes + '">' + cars[i].makes + '</option>';    }    $("#make").html(options);   // populate select box array      $("#make").bind("click", function() {      $("#model").children().remove() ;   // clear select box      var options = '';      (var = 0; < vehicles[this.value].length; i++) {        options += '<option value="' + vehicles[this.value][i] + '">' +          vehicles[this.value][i] +          '</option>';      }      $("#model").html(options);   // populate select box array      $("#models").addclass("show");    });     // bind end  });

.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;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>    <div id="wrapper">    <fieldset id="myfieldset">      <legend>cars</legend>      <fieldset id="area">        <label>select make:</label>        <div id="selection">          <div id="makes">            <select id="make"size="2"></select>          </div>          <div class="hide" id="models">            <select id="model" size="3"></select>          </div>        </div>      </fieldset>    </fieldset>  </div>

it's not entirely clear question layout you're trying achieve, judging fact have applied "float:left" select elements, looks want select elements appear side side. if case, can achieve doing following:

• to centrally align elements need add "text-align:center" containing block level element, in case #selection.
• the position of elements floating not affected "text-align" declarations, remove "float:left" declaration select elements.
• in order #make , #model divs sit side side out use of floats must displayed inline elements, add "display:inline" both #make , #model (note lose vertical margin on elements, might need make other changes exact layout want).

as select elements displayed inline default, alternative last step remove #make , #model divs , and apply "show" , "hide" classes model select element directly.