title: Why image is showing in same place with absolute position and random top, left criteria in HTML img generated by Javascript
body: <p>I am getting issue with this code</p>
  
  <pre><code>    function createSmileys(){
              var i = 1;
              var bL=false;
              while(!bL){
                      createNode();
                      if(i==5){
                              bL=true;
                      }
              i+=1;
              }
      }
      function createNode() {
              var x_axis = Math.floor(Math.random() * 400);
              var y_axis = Math.floor(Math.random() * 400);
              var ls = document.getElementById("leftside");
              var x = document.createElement("IMG");
              x.setAttribute(":position","absolute");
              x.setAttribute("float","left");
              x.setAttribute("left",x_axis + "px");
              x.setAttribute("top",y_axis + "px");
              x.setAttribute("src", "smile.png");
              x.setAttribute("width", "100px");
              ls.appendChild(x);
      }
  </code></pre>
  
  <p>Though its creating the smileys but they are all aligned on left top corner.
  HTML code is here:</p>
  
  <pre><code>            &lt;head&gt;
                      &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
              &lt;/head&gt;
              &lt;body&gt;
                      &lt;script src="generateImage.js"&gt;&lt;/script&gt;
                      &lt;h1&gt;Matching Game&lt;/h1&gt;
                      &lt;p&gt;Click on the extra smiling face on the left.&lt;/p&gt;
                      &lt;div id="leftside" onclick="createSmileys()"&gt;&lt;p id="p"&gt;Left&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="rightSide"&gt;&lt;p id="p"&gt;Right&lt;/p&gt;&lt;/div&gt;   
              &lt;/body&gt;
  </code></pre>
  
  <p>Please help in this code...</p>