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

Answer 1

Both <p> and <h1> tags are block level tags - 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.

Answer 2

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 3

Create a new tag in CSS with the desired attributes and values or edit an existing one (ex: .address). Then put the text you want to be inline under that tag and that's it.

After that the code should look like this:

containerIntro h1,

containerIntro address //(in our case) 

{display: inline;}

Answer 4

Change your CSS to something like this:

p.start {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
text-align: justify;
width: 200px;
float: left;
}

h1.start {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0;
width: 200px;
float: left;
}

Answer 5

it would be more easy if you can also show your HTML. I am just guessing right now.

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