Creating dynamic DIV for existing input fields in Javascript

In my page I have the below codes for dynamic creation of input fields. But What I want to do here is inserting a div tag for an existing row of input fields.

This coding is a HTML for first set of input field row. Here all the fields are aligned within div and alignment here is fine now.

<div id="pollid">

                    <p >Poll Choice</p>

                    <input type=hidden name="choicecount" id="choicecount" value="1">

                    <input type=file name="choiceimg1" value ="Select"  onchange="readURL(this)" style="display:none;">

                <div style="width:440px;height:90px;">
                    <div style="width:335px;height:85px;float:left;">
                            <div id="imgbg" style="float:left;width: 110px;background-image: url(images/transparent.png);height: 80px;text-align: center;border: 1px solid #CCC;">  
                                <input type="button" onclick="HandFileButtonClick();"  value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">
                            </div>
                            <div style="float:right;margin-top: 30px;">
                                <input type=text name="choicename1" id="firstremove2">

                                <input type="button" value="Remove" id="firstremove3" onclick="document.getElementById('imgbg').style.display='none';document.getElementById('firstremove').style.display='none';document.getElementById('viewimg1').style.display='none';document.getElementById('firstremove2').style.display='none';document.getElementById('firstremove3').style.display='none';" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">
                            </div>
                    </div>
                    <div style="float:right;">
                    <img src="#" name="viewimg1" class="addmultiple" id="viewimg1" height="70px" width="85px" style="display:none"/>

                    <br />
                    </div>
                </div>
                <span id="file" ></span>

                <input id="addchoice" type=button value="Add New Entry" onclick="addnew(document.forms['addpoll']['choicecount'].value);">

        </div>

The below coding is for dynamically created input fields without div specification. So the alignment is not same as the first row.

function addnew(type)
{
    type=parseInt(type)+1;
    var name="choiceimg"+type;
    var name10="choiceimgs"+type;
    var name1="choicename"+type;
    var name2="viewimg"+type;
    var name3="remover"+type;
    var name4="br"+type;
    var name5="imgbg"+type;
    var mydiv = document.createElement("div");
    mydiv.setAttribute("id",name5);
    mydiv.setAttribute("style","width:110px;height:80px;background-image:url(images/transparent.png);float:left;text-align:center;border:1px solid #ccc;");
    var text = document.createElement("input");
    text.setAttribute("id", name10);
    text.setAttribute("type", "button");
    text.setAttribute("class", "addmultiple");
    text.setAttribute("style", "width: 190px");
    text.setAttribute("style", "padding-left: 5px;margin-top: 30px;");
    text.setAttribute("value", "Browse");
    text.setAttribute("onclick", "HandleFileButtonClick(this)");
    text.setAttribute("name", name10);
    var textf = document.createElement("input");
    textf.setAttribute("type", "file");
    textf.setAttribute("class", "addmultiple");
    textf.setAttribute("style", "width: 246px");
    textf.setAttribute("style", "display:none;");
    textf.setAttribute("name", name);
    textf.setAttribute("onChange", "readURL(this)");
    var file = document.createElement("input");
    file.setAttribute("type", "text");
    file.setAttribute("name", name1);
    file.setAttribute("style", "margin-top: 60px;");
    var viewimg = document.createElement("img");
    viewimg.setAttribute("src", "#");
    viewimg.setAttribute("id", name2);
    viewimg.setAttribute("width", "85px");
    viewimg.setAttribute("height", "70px");
    viewimg.setAttribute("name", name2);
    viewimg.setAttribute("style", "display:none");
    viewimg.setAttribute("class", "addmultiple");
    var remove = document.createElement("input");
    remove.setAttribute("type", "button");
    remove.setAttribute("value", "Remove");
    remove.setAttribute("style", "color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;");
    remove.setAttribute("name", name3);
    remove.setAttribute("onclick", "remove(this)");
    var br1 = document.createElement("br");
    br1.setAttribute("id", name4);
    document.forms['addpoll']['choicecount'].value=type;
    var addfile = document.getElementById("file");
    var view = document.getElementById("file");
    var remove1 = document.getElementById("file");
    var br2 = document.getElementById("file");
    var textf1 = document.getElementById("file");
    var myimgdiv = document.getElementById("file");
    myimgdiv.appendChild(mydiv);
    var addtext = document.getElementById(name5);
    addtext.appendChild(text);
    addfile.appendChild(file);
    remove1.appendChild(remove);
    view.appendChild(viewimg);
    br2.appendChild(br1);
    textf1.appendChild(textf);
}

The text box is at the bottom of the each row. I want to align that text box and remove button center.

Clearly I want the textbox should be placed at the center as same as the first row. I tried myself in several ways. But it shows the empty box after tat. Anybody can help me to solve this issue. Thanks in advance