CODEWITHSUNDEEP
htmlcss
tlflow
tlflow

Reputation: 165

H2 and paragraph, inline?

I know paragraph and headings are block elements, so that's why I'm having a time wrapping my mind around what's the best way to do this accessibility-wise.

Let's say for instance I have copy like this:

*This is the heading.*This is the paragraph, blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

How would my HTML and CSS display this properly?

Upvotes: 8

Views: 32669

Answers (3)

zzzzBov
zzzzBov

Reputation: 179046

alternatively:

h2
{
  float: left;
  /* adjust h2 font-size etc as needed */
}
...
<div>
 <h2>heading</h2>
 <p>Paragraph</p>
</div>

This has the advantage of still being able to specify margins, paddings, etc on the h2.

Upvotes: 1

Tomalak
Tomalak

Reputation: 338148

h2, p {
  display: inline;
}
div.p {
  /* whatever margins/paddings you would normally apply to p */
}

and

<div class="p">
 <h2>This is the heading.</h2>
 <p>This is the paragraph</p>
</div>

You would need to enclose all <p> in a block level element (like <div>) to avoid that consecutive paragraphs collapse.

Upvotes: 12

Harmen
Harmen

Reputation: 22438

You're almost answering the question yourself ;)

h1, p {
  display: inline;
}

Not sure if it works in IE6 though (I was confused with inline-block here, inline works fine in all browsers)

Upvotes: 9

Related Questions