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?