Javascript appendChild()

Hey I am trying to appendChild() two consecutive div's but what I am expecting as result is for them to be side by side, but they are one on top of the other like so:

1st div
2nd div

instead of 1st div 2nd div

var addBudContainer = document.createElement("div");
addBudContainer.id = "addBudContainer";

var addBudBtn = document.createElement("div");
addBudBtn.className = "addBud";

var addBudBtnName = document.createElement("a");
addBudBtnName.className = "btn-addBud";
addBudBtnName.setAttribute("href","#");

addBudBtn.appendChild(addBudBtnName);

var addBudTxt = document.createElement("input");
addBudTxt.id="addBudTxt";
addBudTxt.type="text";
addBudTxt.defaultValue="Enter buddy name";
//txt box effects   
addBudTxt.onfocus开发者_StackOverflow中文版 = function(){if(replyTxt.value==replyTxt.defaultValue) replyTxt.value='';};
addBudTxt.onblur= function(){if(replyTxt.value=='') replyTxt.value=replyTxt.defaultValue;};

addBudContainer.appendChild(addBudBtn);
addBudContainer.appendChild(addBudTxt);

---

You may have better results with <span> instead of <div> if you want the elements to be laid out in-line rather than as separate blocks.

---

By default, <div> elements are "block" elements. In simple terms, this means that a <div> will be on its own line (or lines) within its parent element.

<span> elements by default are "inline", which might be what you want to use. Inline elements don't push their sibling elements onto other lines.

If you want to override this behavior, you can using CSS.

/* This assumes the parent element of your divs has 'some_class' as its class */
.some_class > div {
  display: inline;
}

Edit: I added the optional separator semicolon after display: inline.

---

You can also add the "float: left" CSS property to the DIVs, which will cause them to stack up side by side on the left until they've filled up the available width of the enclosing element.