Stop dynamic div to push other elements

Question

I have the following:

Text text text2 text text
text text text text text.

At some point I am replacing this to this:

Text text <div class="highlight" style="background-color:red;">text2</div> text text
text text text text text.

But it pushes the text, how can I make it stay in the same order as before?

This is what I tried:

float:left;

And

parent().css('overflow', 'auto');

It didn't work.
Do you know any solution?

Thanks in advance.

Answer 1

You have two solutions:

1) Just use span instead of div

2) You can use div but you have to define the following style

div.highlight {
  display:inline;  
}

Here you can find a demo of the second solution: http://jsfiddle.net/smWvA/2/