javascript - How to align div position -

i creating script show preview of uploaded image on client side option remove it.

i have done of problem ui part position of close icon not top-right aligned.

here code , jsfiddle link, test on jsfiddle add image browse button.

jquery(function($) {    $('div').on('click', '.closediv', function() {      $(this).prev().remove();      $(this).remove();      $('#upload-file').val("");    });      var fileinput = document.getelementbyid("upload-file");      fileinput.addeventlistener("change", function(e) {        var filesvar = this.files;        showthumbnail(filesvar);      }, false);          function showthumbnail(files) {      var file = files[0]        var $thumbnail = $('#thumbnail').get(0);        var $image = $("<img>", {        class: "imgthumbnail"      });      var $pdiv = $("<div>", {        class: "divthumbnail",        style: "float: left"      });      var $div = $("<div>", {        class: "closediv",        style: "float: right"      }).html('x');        $pdiv.append($image, $div).appendto($thumbnail);      var reader = new filereader()      reader.onload = function(e) {        $image[0].src = e.target.result;      }      var ret = reader.readasdataurl(file);      var canvas = document.createelement("canvas");      ctx = canvas.getcontext("2d");      $image.on('load', function() {        ctx.drawimage($image[0], 100, 100);      })    }  });

img {    width: 30%;    float: left;    height: 100px;    width: 100px;  }  .closediv {    width: 20px;    height: 21px;    background-color: rgb(35, 179, 119);    float: left;    cursor: pointer;    color: white;    box-shadow: 2px 2px 7px rgb(74, 72, 72);    text-align: center;    margin: 5px;  }  .pdiv {    float: left;    width: 100%  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>  <div id="thumbnail"></div>  <input type="file" id="upload-file" accept="image/*" />

http://jsfiddle.net/r0taz01l/11/

you need give

 .divthumbnail { position: relative; } 

and closediv style

.closediv {     position: absolute;     width: 20px;     height: 21px;     background-color: rgb(35, 179, 119);     float: right;     cursor: pointer;     color: white;     box-shadow: 2px 2px 7px rgb(74, 72, 72);     text-align: center;     margin: 5px;     right:0px; } 

here completed solutions http://jsfiddle.net/r0taz01l/12/