Unable to line up 2 input fields side by side

Hello everybody,

I’m working on an interface for file upload but I can’t seem to line up the two input fields so there displayed side by side.
desired results: Choose file(button) - user selected file.png - remove button
I added a screen shot of what it looks like as of now.

     **HTML script** 
   <div class="form-group form-group-sm">				
	<label>Upload images</label>
	<div class="panel panel-default">
		<div class="panel-body">
			<span class="h5"> 
					<li>Excepted file formats: JPEG, PNG, & GIF. </li>
					<li>Max number of files you can upload: 3 </li>
			<div id="addField"></div>					
			<button  type="submit"  id="add-file-field">Add Image</button>

the java scrip that controls the buttons:

	var maxupload = 3;
	var total = 0;
	  $("#addField").append('<div style="margin:0px; padding:0px;" class="added-field"><input type="file" name="data[]"><input type="submit" class="remove-btn" value="Remove"></div>');
	  total ++;
	  if (total == 3)  { $(this).attr("disabled", "disabled");   }
	$(document).on('click', '.remove-btn', function(event) {
	  if (total == maxupload){

Any help you can provide would be greatly appreciated.

Can you give us your CSS?

Hi RyanReese,

Thanks for the replay back.
I’m using bootstrap and as of now i haven’t changed any of the default settings other then to add 2 lines of css the the upload script

div#addField {
display: inline-block;

Does that do what you want?


That’s not all the html/css is it though?!..What’s containing the choose file button and text beside it? Whatever it is, set that container as inline-block along with the remove button container… or set both as block float left/right respectively.



Floating changes the display to block so no need for that.

time to clean up my css! Cheers

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.