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

Question

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

How do you style the form so that the #makes 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?

CSS

.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: 0.75em; background-color: #ebf4fa; }
body { margin: 0; padding: 0; font-family : Verdana; font-size : 12px; text-align: center ;  }
#wrapper { margin: 40px auto 0 auto ; }
#myFieldset {   width: 213px ;}
#area { margin: 20px ;}
#area select {width: 75px ; float:left ;}
#area label {display: block ;   font-size: 1.1em; font-weight: bold; color: #000000;}
#area #selection {display: block ; }
#makes {margin: 5px ;   }
#models {margin: 5px ;  }

Javascript

var cars = [
{
"makes"  : "Honda",
"models"  : ['Accord','CRV','Pilot']
}, 
{
"makes"   :"Toyota",
"models"  : ['Prius','Camry','Corolla']
} ] ;      

$(function() {
vehicles = [] ;
for(var i=0; i<cars.length; i++) {
vehicles[cars[i].makes] = cars[i].models ;
}
var options = '' ;
for (var i = 0; i < cars.length; i++) {
options += '<option value="' + cars[i].makes + '">' + cars[i].makes + '</option>';
}
$("#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 < vehicles[this.value].length; i++) { 
 options += '<option value="' + vehicles[this.value][i] + '">' + vehicles[this.value][i] + '</option>';
 }
 $("#model").html(options);   // populate select box with array
 $("#models").addClass("show") ;
}   // bind function end
);   // bind end
});

HTML

<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>

Thanks

Answer 1

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.

Answer 2

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:

• To centrally align elements you need to add "text-align:center" to the containing block level element, in this case #selection.
• The position of elements that are floating is not effected by "text-align" declarations, so remove the "float:left" declaration from the select elements.
• 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 loose the vertical margin on those elements, so you might need to make some other changes to get the exact layout you want).

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.