Images not floating

I have a insert/upload form. At the very bottom I have a file field to upload multiple images with a preview div, which is declared in my Javascript file and although I have declared the different properties (float etc) within my css file the images are not floating but are positioned underneath eachother?

This is the part in the function where the div and image are declared:

var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='preview"+ abc +"' class='preview'><img id='previewimg" + abc + "' src=''/></div>");

and this is the css:

.preview{
  width: 100%;
  padding: 1rem 0;
  float: left !important;
}

.preview img{
  width:100px;
  height:75px;
  float: left !important;
  padding: 3px;
  border: 1px solid rgb(232, 222, 189);
}

I have tried display: inline-block as well but they won’t line up next to each other. What am I doing wrong?

Set the width: 100px on the .preview div and float it. Setting its width to 100% means nothing can sit beside it.

Hi Ralph, that was indeed the problem, Thanks for the reply and sollution.