What alternatives to run-in?

Using run-in

Appears to work in current Opera and Konqueror, little else (Mac IE?). Need to put a space either at the end of the <h3> or at the beginning of the following paragraph or, as here, insert one using a pseudo element.

A run-in h3

followed by a paragraph containing arbitrary nonsense to fill space.

Another paragraph.

Another run-in

and paragraph

First attempt at a bodge

Using display: inline, we lose the :first-letter styling because that doesn’t apply to inline boxes. Also requires spurious mark-up in the form of an break or empty paragraph to prevent an <h3> running-in to the previous paragraph.

First letter

styling can, with irritating extra mark-up, be applied explicitly, but it would be nice to avoid this.

A brief h3

as with real run-ins, we have to put a space at the end of the <h3> (before the </h3>) or inside the beginning of the first paragraph, otherwise there’ll be no space between the last word of the <h3> and the first word of the paragraph. Unfortunately there’s little point trying to do it automatically, as several of the browsers for which fake run-ins are necessary don’t recognise :after either.


arise if there is no block element between the first paragraph and the next <h3>

This paragraph serves to avoid the problem.

No block element

between this first paragraph and

this h3

so they end up run together.


this <h3> is preceded by an empty paragraph, which might introduce excess space. The previous ones use an empty paragraph styled to take up less room.


this <h3> is wrapped in a div, which is another kludgey way of avoiding that trouble, but undesirable since it uses different padding/margin from paragraphs.

Using floats

Floating the <h3> seems attractive, because that way it remains a block, so first-letter styling still applies and there’s no problem with unintended running together, so no need for that extra markup.

As far as I can tell this approach is fundamentally flawed because there’s no way to get the baseline of text in a float to line up with the baseline of adjacent text. Have I missed some way of doing this?

A floaty h3

requires either padding-right, or an &nbsp; at the end of the <h3> because ordinary spaces are lost between blocks. The result is poor justification.

A second paragraph to follow the first one after the <h3>.

Does an absence of descenders

make a difference to the vertical position of the header?

A pointless extra paragraph.

No need for extra markup

between this one-paragraph <h3> and the next.