css styling a dojo dialog

I have a dialog that has groupings of label and ValidationTextBoxs that are programmaticly added to the the dialog. example: first name:XXXXXX

If I specify no css formatting the labels and ValidationTextBox appear nicely side by side. BUT the groupings of are smushed on top of one another with no spacing.

If I add add css for height, margin, padding. the first grouping is fine, however the following labels start at where the beginning of the of the current ValidationTextBox. not at the beginnig of the next line. so the alignment is all out of whack.

Yes I have tried individually changing the height, padding, and margins of the labels, and textbox. placing

at the end of line NO LUCK. I thought of wrapping the grouping in spans or divs but get same behavior and setting the size of the enclosing div/span. BUT no luck.

could someone explain why the following function

function buildDialogField(fieldHolder, id, title, value, widgetId)
{
    var newLabel, newField;
    if (value === null) {
        value = "";
    }

    newLabel = "<div class='datadiv'><label for='" + id + "'>" + title + ":</label>";
    dojo.place(newLabel, fieldHolder);
    newField = new dijit.form.ValidationTextBox({
        id: widgetId,
        name: "myData",
        value: value,
        trim: true
    });
    dojo.place(newField.domNode, fieldH开发者_高级运维older);
    dojo.place("</div>", fieldHolder);
}

generates the following html

<div class='datadiv'>
    <label for='name'>me:</label>
</div>
<div id="widget_305" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitValidationTextBox" wairole="presentation" role="presentation" widgetid="305">

The ending div appears after the label but before ValidationTextBox. though that is not what I coded!!!

thanks to anyone whom helps me clear up my confusion.

You're sending invalid/incomplete HTML to dojo.place, and it (or the browser) is "completing" it for you. dojo.place isn't just an alias for elem.innerHTML += "...", but you seem to sort of be treating it as such.

I think it should actually be trivial to fix this code:

newLabel = "<div class='datadiv'><label for='" + id + "'>" + title + ":</label></div>";
dojo.place(newLabel, fieldHolder);
newField = new dijit.form.ValidationTextBox({
    id: widgetId,
    name: "myData",
    value: value,
    trim: true
});
// the following is equivalent to dojo.place(newField.domNode, newLabel)
newField.placeAt(newLabel);

To explain. the newLabel variable ends up receiving the generated top-level DOM node generated from the HTML content passed to dojo.place. (Notice I completed the HTML string by adding the ending </div>.) In this case, that's actually the div, not the label - so you might want to change the variable name.

Then, we place the widget inside that div - by default, placeAt places the widget as the last child of the specified node (just like dojo.place(nodeToBePlaced, targetNode) would by default).

You can tell it otherwise by passing another parameter - see http://dojotoolkit.org/api/dijit/_Widget/placeAt and http://dojotoolkit.org/api/dojo/place for details.