How do I style a div to make it run with the text?

Question

I want to make a small text-height div run with the text. My code looks like this:

blah blah blah <div style="display:block; float: left; width: 100px">[IN A DIV]</div> blah

it should come out to look like:

blah blah blah [IN A DIV] blah blah

but it always comes out as:

blah blah blah 
[IN A DIV]
blah blah

Answer 1

Change display:block to display:inline

Answer 2

Why do you want a <div>? <div> is a block-level element and not meant for what you want.

Try a <span>, as that is what should be used for inline stuff and would be more semantically accurate.

Required reading: Block and Inline elements.

Answer 3

display: inline; and get rid of the float.

Answer 4

That's because a <div> is a block-level element. A block will always break up the flow of the objects around it. You either want to set your <div> to display: inline; or use a <span> instead. Spans are inline by default.

Answer 5

use a <span>, which is the inline equivalent of a div.

Answer 6

Use display:inline instead of display:block or better yet use a SPAN instead of a DIV