H2 and paragraph embedded?

Question

I know that paragraph and headings are block elements, so why do I have time covering my mind around what is the best way to do this in terms of accessibility.

Say, for example, I have a copy like this:

* This is the headline. * This is a 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 blah blah blah blah blah blah ..

How would my HTML and CSS render correctly?

Answer 1

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 will need to enclose the entire <p> in a block level element (e.g., <div> ) to avoid the coincidence of subsequent paragraphs.

Answer 2

You almost answer 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)

Answer 3

as an alternative:

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

This has the advantage that you can still specify fields, paddings, etc. on h2.