How to set a div within text?

Question

Is it possible to declare CSS for a div, so that the declared div will be shown inside a line of text? E.g. a span can be shown inside text, but how about div? See below or here for an example.
Thanks in advance

This is a * * * Text-Test! * * * 
This is a * * * Text-Test! * <span style="position:absolute; width:200px; color:#FF0000; float:left;"><b>This Span is inside the text or line.</b></span>* * This is a * * * Text-Test! * * *<br/>
This is a * * * Text-Test! * * * This is a * * * Text-Test! * * *<br/>
This is a * * * Text-Test! * <div id="Helper" style="position:absolute; background-color:#00FF00; width:100px; height:20px; float:right;">*** This DIV is at the beginning of the text or line. *** </div>* * This is a * * * Text-Test! * * * <br/>
This is a * * * Text-Test! * * * This is a * * * Text-Test! * * *

score 2 · Accepted Answer · answered Jul 29 '14 at 17:04

2

You need to use display:inline in css. Here is the link to the fiddle

Try like this: Hello <div style="display:inline;">World!</div> How are you?

answered Jul 29 '14 at 17:04

Ruchir Gupta

990
3
10
20

1

Yes, but that is not possible if you use that within a paragraph – GCallie Jul 29 '14 at 17:05
`div` inside a paragraph `
` tag is invalid according to html standards.
– Ruchir Gupta Jul 29 '14 at 17:07
@user3815508 can I ask to mark my answer as the right answer and an upvote? – Ruchir Gupta Jul 29 '14 at 17:09
1

Gladly, but I can't do it, because when I try to it, then I obtain the message: "Vote up requires 15 reputations" , I haven't yet 15-reputations. – user3815508 Jul 29 '14 at 17:15

score 2 · Answer 2 · edited May 23 '17 at 12:01

2

As per the following answer, inline div elements should be avoided if possible, as they are not valid. Use span instead.

https://stackoverflow.com/a/1611079/2359161

edited May 23 '17 at 12:01

Community

1
1

answered Jul 29 '14 at 17:08

Alex Podworny

1,018
1
14
25

score 1 · Answer 3 · answered Jul 29 '14 at 17:32

div is a block level element. Means it always starts and end with new line when displayed in browser Also we use divs when we want to give style to group of elements.For Example

<html>
<div>
<h1>StackOverflow</h1>
<p>welcome to stackOverflow</p>
</div>

Now in above example we group together two html elements. if you still want to use div as inline block element. You have to do one thing

div{
  display:inline;
}

Now when you set property to inline it behaves like inline block element.Now your div will accepts margin and padding but it still remain inline.Margin and padding will only push other elements horizontally but not vertically

div{
display:inline-block;
}

but if you div property to inline-block, then you can set width and height of element and it still remain inline.

for more information [http://css-tricks.com/almanac/properties/d/display/]

How to set a div within text?

3 Answers3