9

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?

Andrew Vit
  • 18,961
  • 6
  • 77
  • 84
  • how would a display:run-in; work there? just out of curiosity the second option is where id go, just wondering why you have to have +* – Ascherer Sep 29 '10 at 22:39
  • You need to put display:inline on the element that follows the heading, or else the paragraph would still display as its own block. (Just making the h3 display:inline means it would form its own anonymous block when it's surrounded by other block elements.) – Andrew Vit Sep 29 '10 at 22:44
  • @Ascherer, I'm not familiar with display:run-in; probably because it's not widely supported. But, throw me an answer if you can make a case for it: even if it's just "this is how it should work in CSS utopia". – Andrew Vit Sep 29 '10 at 22:47
  • I'm assuming that you'd be unable to predict the width of the `h3` element. (So `h3 {position: relative;}` and `h3 + p:first-line {margin-left: $width-of-h3; }` is not an option?) – David Thomas Sep 29 '10 at 23:23
  • On “Option 3”, ARIA lets you *restore* the semantics: `…` should work, though really at that point I’d be as likely to add a wrapper div around the h3 and following p, and make them inline. But also you should test *both* such things in accessibility tech (AT) like popular screen readers before using it, because it’s a deviation from well-established-and-tested patterns. (Yes, even the wrapper div thing—I know that `li { display: inline }` affected some AT historically, so it’s conceivable to me that `

    ` might misbehave.)

     – Chris Morgan Jan 04 '23 at 14:42

1 Answers1

11
<!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

Ascherer
  • 8,223
  • 3
  • 42
  • 60
  • 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 – Ascherer Sep 29 '10 at 22:59
  • 2
    Quirksmode *is* pure awesome for web-dev and reference. – David Thomas Sep 29 '10 at 23:08
  • 1
    Seems to only work in IE (11). Doesn't work in Firefox (27), nor in Chrome (32). – Ivan Jan 22 '14 at 22:09
  • Sadly, this feature is [not ready for production](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility). 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. – Merchako Oct 26 '17 at 17:47