Removing and readding an element pushes another element down, toggling the float in dev tools causes the element to move back to the correct position

Question

I have a container that holds three items. One is floated left, another is centered and the last is floated right. If I remove the center item and add it back the right most item gets pushed down and I don't know why.

If you select the right item and view it in Chrome dev tools you can toggle the float: right off/on and then it will be positioned correctly.

This happens in Chrome but does not happen in FireFox. (I have not tested in IE)

I have a demo of the issue here: http://codepen.io/anon/pen/rVyRmy?editors=001

var on = true;
var l = $('<div class="left"></div>');
var r = $('<div class="right"></div>');
var clicky = function() {
  if (on) {
    $('.container').empty();
    $('.container').append(l);
    $('.container').append($(
      '<div class="fill">' +
      '<span>text</span>' +
      '<span>text</span>' +
      '<span>text</span>' +
      '<span>text</span>' +
      '</div>'
    ));
    $('.container').append(r);
    on = false;
  } else {
    $('.container').empty();
    $('.container').append(l);
    $('.container').append($('<input type="text" />'));
    $('.container').append(r);
    on = true;
  }
  $('.right').on('click', clicky);
};

$('.right').on('click', clicky);

.container {
  width: 400px;
  height: 20px;
  text-align: center;
  background-color: lightgray;
}
.left, .right {
  display: inline-block;
  width: 14px;
}

.left {
  position: relative;
  float: left;
}

.left:before {
  position: absolute;
  top: 4px;
  left: 4px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 8.7px 5px 0;
  border-color: transparent orange transparent transparent;
}

.right {
  position: relative;
  float: right;
}

.right:before {
  position: absolute;
  top: 4px;
  right: 4px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8.7px;
  border-color: transparent transparent      transparent orange;
}

span {
  width: 93px;
  background-color: green;
  display: block;
  float: left;
}
div span:first-child {
  margin-left: 14px;
}

<div class="container">
  <div class="left"></div>
  <input type="text" />
  <div class="right"></div>
</div>

In the above I clear everything and redraw, I have also tried leaving the left and right elements and just removing/adding the center back but I get the same result.

Answer 1

You can fix this by forcing a redraw on the right element. There are a couple of ways to do this, but my preferred way is $(r).hide().show(0);

$(r).offsetHeight has been known to work, though it doesnt work in the codepen you linked to and it doesnt work in safari. For background I added the code as follows:

else {
  $('.container').empty();
  $('.container').append(l);
  $('.container').append($('<input type="text" class="middle" />'));
  $('.container').append(r);
  $(r).hide().show(0);
  on = true;
}

The original SO post from which I got my answer when I ran into a similar problem the other day: Force DOM redraw/refresh on Chrome/Mac