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.

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.

• javascript
• css
• html

5 Answers 5

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/smWvA/2/

You can use span instead of div

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

Div has display:block as default and that is whats cousing that effects.

So you could use SPAN insteed which has inline as default for the property display

If you want to read more about the display property have a look here: https://developer.mozilla/en/CSS/display

I made an example on jsfiddle. If you decide to use div you must specify display: inline or inline-block. Span is inline by default, so it's better to use span here...

Example: http://jsfiddle/3L2K6/

Could you pls check if the class-highlight doesn't have any parent css which it inherits. Try seeing the "Computed Style" for text2.

Google Chrome : F12, locate your element or simple right click the text2 and inspect Element.

The Computed Style is on the top right of the inspect element window