Question

I have the following simple code:

<div style="float:right">
   <h2>Header <div style="float:right;background-color:red">my text</div></h2>
   More text
</div>

See this fiddle

This displays the way I want it to in Firefox and IE – with the “my text” showing up to the right of “Header” on the same line. However, in Chrome, the “my text” gets pushed down a line, next to “more text”.

I know that I can get this to work by moving the “my text” div before the “header” text:

<h2><div style="float:right;background-color:red">my text</div>Header</h2>

But for other reasons, I need to keep the html the way it is and would like to accomplish this using css if possible. Is there any way to get this to display the way I want it in Chrome (just by changing the css)?

Answer 1

You can use like this

<div style="float:right">
<h2>Header <div style="display:inline-block;background-color:red">My text</div></h2>
More text
</div>

This shows exactly you want See This Fiddle