CODEWITHSUNDEEP
cssgoogle-chromecss-float
froadie
froadie

Reputation: 83063

How can I get this css to display correctly in Chrome?

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)?

Upvotes: 0

Views: 74

Answers (3)

Sridhar Pendota
Sridhar Pendota

Reputation: 54

I think the following code is helpfull to you...

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

And the following code is also helpfull.....

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

Upvotes: 0

andrewk
andrewk

Reputation: 3871

You can eliminate the float:right and replace with display:inline;

Image Below

enter image description here

Upvotes: 0

Dineshkani
Dineshkani

Reputation: 3015

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

Upvotes: 2

Related Questions