css floating elements error

Question

I have a small problem about div and input floating:

This is my problem, with a jQuery script when you wrote in the input box and press enter, a div element will be added, but if we wrote more then 4 element, the input box remain in the first line and the element go down. Can anyone could help me?

div.box {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  padding: 5px;
}
div.box>div.element {
  background-color: #00B5B5;
  display: inline-block;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 8px 2px 8px;
  border-radius: 5px;
  line-height: normal;
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: 4px;
  float: left;
}
div.box>input#group-input {
  height: 11px;
  /*border: none;*/
  font-size: 12px;
  outline: none;
  vertical-align: top;
  width: 8px;
}

<div class="box" id="box-ins-group">
  <div class="element" id="1">prova</div>
  <input type="text" id="group-input">
</div>

I have tried everything but still not working :( sorry for my bad english

-- Jquery code:

var counter = 0;
$('#group-input').keypress(function(e) {
  if(e.which == 13) {
    if($('#group-input').val().length > 3) {
    $( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
    $('#group-input').val(''); 
    counter++; 
   }
  }  
}); 

counter is a variable

Answer 1

You need to set float: left on the input, and then change this in your js:

$( "div#box-ins-group" ).append

to:

$( "input#group-input" ).before

The problem is that you're appending those elements to the element that contains both the .element divs and the input, so even if you'd fixed the float issue on the input, the new .element divs would always appear after the input in the DOM. Here's a fiddle.

It's also worth noting that you can remove display: inline-block, as it's ignored when you use floats.

Answer 2

Seems that the pills are floating but the input is not. Try this (if you haven't already):

div.container div.edit-local div.form table tr td>div.box>input#group-input {
    height: 11px;
    /*border: none;*/
    font-size: 12px;
    outline: none;
    vertical-align: top;
    width:8px; 
    float: left;
}