Issues laying out label/input/select elements using CSS in dynamically generated HTML

Question

I have a form that is generated with Javascript after clicking a button. I can't seem to get the layout right using CSS.

What I want is each label / input pair to be on single line with the exception of the motion detection and email notice to be on the same line. Then have the buttons right justified. Here is the relevant code from the demo:

Demo: http://jsfiddle.net/h34Hr/29/ (click the "Edit" link in the Result window)

HTML:

<div id="editform"></div>
<button id="editbutton" onClick='edit(this, "/ajax_dash","test25645645", "1", "0", "0")'>Edit</button>

CSS:

fieldset {
    background: #2B3D61;
    border: solid 4px black;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

fieldset legend {
    background: #A8CB17;
    border: solid 4px black;
    padding: 6px;
    color: #000000;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

label, input, select, textarea {
    display: block;
    width: 200px;
    float: left;
    margin-bottom: 1em;
}

select {
    width: 205px;
}

label {
    text-align: right;
    width: 100px;
    padding-right: 2em;
}

Script:

function edit(t, to, cameraname, cameraquality, camerastatus, emailnotice) {
    var thisrow = $(t).closest('tr'),
        camerahash = thisrow.prop('data-hash');

    thisrow.hide();

    var mydiv = document.getElementById("editform");
    var myForm = document.createElement("form");
    myForm.method = "post";
    myForm.action = to;

    var myfieldset = document.createElement("fieldset");
    var mylegend = document.createElement ("legend");
    mylegend.innerHTML = "Edit camera settings";
    myfieldset.appendChild(mylegend);

    //camera name
    var label = document.createElement("label");
    label.for = "text";
    label.innerHTML = "Camera name: ";
    myForm.appendChild(label);

    var myInput = document.createElement("input");
    myInput.setAttribute("name", "camera_name");
    myInput.setAttribute("value", cameraname);
    myForm.appendChild(myInput);

    //camera quality
    label = document.createElement("label");
    label.
    for = "text";
    label.innerHTML = "Camera quality: ";
    myForm.appendChild(label);

    var mySelect = document.createElement("select");
    mySelect.name = "camera_quality";
    if (cameraquality == 0) {
        cameraquality = "High";
        mySelect.options[0] = new Option(cameraquality, "HIGH", false, true);
        mySelect.options[1] = new Option("Medium", "MEDIUM", false, false);
        mySelect.options[2] = new Option("Mobile", "MOBILE", false, false);
    }
    else if (cameraquality == 1) {
        cameraquality = "Medium";
        mySelect.options[0] = new Option("High", "HIGH", false, false);
        mySelect.options[1] = new Option(cameraquality, "MEDIUM", false, true);
        mySelect.options[2] = new Option("Mobile", "MOBILE", false, false);
    }
    else {
        cameraquality = "Mobile";
        mySelect.options[0] = new Option("High", "HIGH", false, false);
        mySelect.options[1] = new Option("Medium", "MEDIUM", false, false);
        mySelect.options[2] = new Option(cameraquality, "MOBILE", false, true);
    }
    myForm.appendChild(mySelect);

    //camera_status = Motion detection
    label = document.createElement("label");
    label.
    for = "text";
    label.innerHTML = "Motion detection: ";
    myForm.appendChild(label);

    myCheckBox = document.createElement("input");
    myCheckBox.type = "checkbox";
    myCheckBox.name = "camera_status";
    //myCheckBox.value = "On";
    if (camerastatus == 0) {
        myCheckBox.checked = true;
        myCheckBox.title = "Turn motion detection off";
    }
    else {
        myCheckBox.title = "Turn motion detection on";
    }
    myForm.appendChild(myCheckBox);

    //email_notice
    label = document.createElement("label");
    label.
    for = "text";
    label.innerHTML = "Email notice: ";
    myForm.appendChild(label);

    myCheckBox = document.createElement('input');
    myCheckBox.type = "checkbox";
    myCheckBox.name = "email_notice";

    //myCheckBox.value = "On";
    if (emailnotice == 0) {
        myCheckBox.title = "Turn email notice off";
        myCheckBox.checked = true;
    }
    else {
        myCheckBox.title = "Turn email notice on";
    }
    myForm.appendChild(myCheckBox);

    //submit changes button
    mySubmit = document.createElement("input");
    mySubmit.type = "button";
    mySubmit.name = "apply_changes";
    mySubmit.value = "Apply changes"

    myForm.appendChild(mySubmit);

    //cancel changes button
    myCancel = document.createElement("input");
    myCancel.type = "button";
    myCancel.name = "cancel_changes";
    myCancel.value = "Cancel"
    myCancel.onclick = function() { 
        thisrow.show();
    }; 
    myForm.appendChild(myCancel);

    myfieldset.appendChild(myForm);
    mydiv.appendChild(myfieldset);
}

Answer 1

Without any changes to your HTML or Javascript you can achieve what you're looking for with changes to your CSS. Both clear and float are helpful for adjusting layouts.

Demo: http://jsfiddle.net/ThinkingStiff/jdKxd/

CSS:

label {
    clear: both;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
    width: 110px;
}

input[type="checkbox"] {
    width: 20px;
}

input[type="button"] {
    float: right;
}

input[name="apply_changes"] {
    clear: both;
}

input[name="camera_status"] + label {
    clear: none;
}