why do inputs created by javascript appear outside their divs?

Question

Why are the inputs created by JavaScript in this very simple code appearing below the div instead of inside it?

HTML:

<div id="magicButtonDiv">
    <p>I am filler text</p>
</div>

JavaScript:

function makeButton() //Activated when a button in another part of the page is pressed
{
    var text = "";
    text += "<p>What is your gender?</p>";
    text += "<input type='button' class='genderButton' value='male' onClick='maleFunction'/>";
    text += "<input type='button' class='genderButton' value='female' onClick='femaleFunction'/>";
    document.getElementById("magicButtonDiv").innerHTML=text;
}

CSS:

#magicButtonDiv
{
    box-sizing         : border-box;
    -moz-box-sizing    : border-box;
    -webkit-box-sizing : border-box;
    border             : 1px solid #000000;
}

input.genderButton
{
    float.      : left;
    margin-left : 2%;
    width       : 47%;
}

There's more code, but I think the error is somewhere in this part of the code.

possible duplicate of [floating stuff within a div, floats outside of div. Why?](http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why) — JJJ, Aug 30 '15 at 17:31
you have many errors in your javascript..could you please add a working fiddle too.. — Lal, Aug 30 '15 at 17:33

score 1 · Accepted Answer · answered Aug 30 '15 at 17:34

1

Add style rule of float:left to your #magicbuttondiv. It will solve the problem

answered Aug 30 '15 at 17:34

Ankit Agarwal

1,350
10
15

Lal · Answer 2 · 2015-08-30T17:43:51.520

See this fiddle

You have many errors in your Javascript. Please replace your Javascript with the below given one

function makeButton() {
    var text = "";
    text += "<p>What is your gender?</p>";
    text += "<input type='button' class='genderButton' value='male' onClick='maleFunction()'>";
    text += "<input type='button' class='genderButton' value='female' onClick='femaleFunction()'>";
    document.getElementById("magicButtonDiv").innerHTML = text;
}

UPDATE

I just found that you have errors in your CSS too..

Notice float.: left; specified for input.genderButton. Realised just now that the float was not actually applied.

So here is the updated fiddle with floats applied.

That's not the problem, I just typed it wrong when I was putting it into StackOverflow, but thanks anyways. — Bill Bllson, Aug 30 '15 at 17:42

why do inputs created by javascript appear outside their divs?

2 Answers2

See this fiddle