H1 tag and P tag on the same line?

Question

I'm trying to place some text inside the P tag after the closing H1 tag like this:

Headline And here are the text right after....

But I can't get it to work. I made this CSS, but something is perhaps missing?

CSS:

p.start {     font-family: 'Open Sans', sans-serif;     font-size: 16px;     line-height: 28px;     text-align: justify;     display: inline; }  h1.start {     font-family: 'Open Sans', sans-serif;     font-size: 16px;     line-height: 28px;     margin: 0;     display: inline-block; } 

HTML:

<div id="containerIntro">     <h1 class="start">Headline </h1>     <p class="start">Text......</p> </div> 

Answer 1

So if you had:

<div id="containerIntro">     <h1>Headline</h1>     <p>And here the text right after...</p> </div> 

Your CSS would have to look something like this:

#containerIntro h1, #containerIntro p {     display: inline;     vertical-align: top;     font-family: 'Open Sans', sans-serif;     font-size: 16px;     line-height: 28px; } 

See http://jsfiddle.net/F3Bcd/3/.

Answer 2

Both <p> and <h1> elements are block level - that means they take up the complete width of their container. You can try floating both elements to the left. This stacks them up on each other to the left side and also converts them to inline elements.