Display heading inline with following paragraph

html css semantic-markup

10,876

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h3 {display:run-in;}
p { display:block; }
div { width: 400px; }
</style>
</head>

<body>
<div>
    <h3> this is a title </h3>
    <p> this is a body of text, this is a body of text, this is a body of text, this is a body of text, this is a body of text,this is a body of text</p>
    <p> this is a body of text, this is a body of text, this is a body of text, this is a body of text, this is a body of text,this is a body of text</p>
</div>
</body>
</html>

That puts the h3 tag in with the p tag. http://www.quirksmode.org/css/display.html doesnt work in ie7 or lower or Firefox at all, so not the best solution

10,876

Author by

Andrew Vit

As an independent web developer and designer, I work with Ruby on Rails, PHP, SQL, and of course wrangle HTML and CSS.

Updated on June 04, 2022

Comments

Andrew Vit almost 2 years
Given the following semantic markup:
```
<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
```
I would like to display the heading inline with the paragraph, like so:

SCOPE OF WORK. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Option 1: float the heading.

This works so long as the heading fits on one line. When it doesn't, the float forms a wide block so the paragraph starts to the right of the block, or below instead of continuing inline:
```
| SCOPE OF | Lorem |
| WORK     | ipsum |
| sit amet, consect|
```
Option 2: display both elements inline.

A style rule such as: h3, h3+* {display: inline;} might work. This assumes that they are preceded & followed by other block elements. Otherwise, other inline elements would flow into them. Also, the adjacent selector (+) is not available in all browsers.

Option 3?

Without adding unnecessary classes or wrapper elements, and keeping it valid & semantic (no span.h3 inside the paragraph!), is there a better way to do this simple thing?
Ascherer over 13 years

ha, thanks, yeah i hadn't used it before, but its actually kinda cool. And thats a pretty handy website for checking stuff like that too, i keep it bookmarked
Sikshya Maharjan over 13 years

Quirksmode is pure awesome for web-dev and reference.
Ivan over 10 years

Seems to only work in IE (11). Doesn't work in Firefox (27), nor in Chrome (32).
Merchako over 6 years

Sadly, this feature is not ready for production. It's never been supported in Firefox, and it was removed from both Safari (v8) and Chrome (v32). It does, however, describe exactly what the OP asked for.