PDA

View Full Version : Multiple div on same line



Kanna
Jun 12th, 2009, 04:56 AM
Iam delveloping something like "SomeName X". Onclick of 'X' the name gets deleted from 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 - it too didn't work. I have seen like the one in Facebook - Compose New Message page in 'To' field. I would be interested knowing how to implement this. Any help appreciated. Thanks in advance.

This is my coding:
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);
}

abduraooft
Jun 12th, 2009, 09:04 AM
You'd need to set a style ofdisplay:inline; or a float:right/left; to your divs or any other block level elements to keep them inline.