html - why do inputs created by javascript appear outside their divs? -

why inputs created javascript in simple code appearing below div instead of inside it?

html:

<div id="magicbuttondiv">     <p>i filler text</p> </div> 

javascript:

function makebutton() //activated when button in part of page pressed {     var text = "";     text += "<p>what 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, think error somewhere in part of code.

add style rule of float:left #magicbuttondiv. solve problem