Multiple divs in sameline

[Kanna]

Hi, i need to delvelop something like "SomeName X". On click of 'X' the SomeName will be deleted from the display. Currently i am doing with DIV(1 DIV for 'SomeName' and 1 DIV for 'X' and finally float-left to another DIV). Since these names(like "Somename1 X",'Somename2 X"...) are populated in the div container, when it reaches the right end of the container, "X" alone getting wrapped to the next line. But it has to stick with 'SomeName' always. As other forums says, I tried with table but it didn't work since the final div container is fixed and i get multiple names with variant length. I tried clear:both, float left, inline options - it too didn't work. I have seen like the one in Facebook - Compose New Message page, when typing in "To" field. I would like to know how to implement this. Any help appreciated. Thanks in advance.

[tivrfoa]

post the code you have

[Kanna]

Code here:
function displayNames(obj, params, teamVar) {
....
obj.style.display = 'block';
var nameLink = document.createElement("A");
var mainContainer = document.createElement("DIV");
mainContainer.setAttribute("class","namesBg");
mainContainer.className = "namesBg";
nameLink.setAttribute("href","JavaScript:");
nameLink.setAttribute("id",params[2][1]);
nameLink.setAttribute("field",hiddenField);
nameLink.attachEvent("onfocus", function () {checkkey(event,assVar)});
nameLink.attachEvent("onblur", function () {checkkey(event,assVar)});
nameLink.attachEvent("onmouseover", closeOver);
nameLink.attachEvent("onmouseout", closeOver);
var linkval = document.createTextNode(params[2][0]);
var sep = document.createTextNode("|");
var deleteBtn = document.createElement("DIV");
deleteBtn.setAttribute("class", "deleteBtn");
deleteBtn.setAttribute("id", params[2][1]);
deleteBtn.setAttribute("title", "Delete");
deleteBtn.setAttribute("field", hiddenField);
deleteBtn.className = "deleteBtn";
deleteBtn.attachEvent("onclick", function () {deleteName(assVar)})
deleteBtn.attachEvent("onmouseover", closeOver);
deleteBtn.attachEvent("onmouseout", closeOver);
var btnTxt = document.createTextNode("X");
nameLink.appendChild(linkval);
deleteBtn.appendChild(btnTxt);
mainContainer.appendChild(nameLink);
mainContainer.appendChild(deleteBtn);
obj.appendChild(mainContainer);
}

[tivrfoa]

you can put Somename X inside a div, then when it reaches the right end it will stick together.