Display a div to the right of an h1?

HTML & CSS
1

I want something like this:

[HIGHLIGHT=‘php’]Greeting: hello
world



but I am getting:

[highlight='php']Greeting: 
hello
world

Here is my html and css:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>

    <style type="text/css">
      .a {
        display: inline;
      }

      .b {
        display: inline;
      }
    </style>
      
  </head>

  <body>
    <section>
      <h1 class="a">Greeting:</h1>
      <div class="b">
        <div>hello</div>
        <div>world</div>
      </div>
    </section>
  </body>

</html>

If I do this instead:

   <section>
      <h1 class="a">Greeting:</h1>
      <div class="b">hello world</div>
  </section>

then I do get the desired positioning:

Greeting: hello world

Why the difference? I tried using float too, and the <div> appears to the right, but under the h1–rather than adjacent to the h1. I assume that is because the h1 extends all the way across the page, but my attempts at limiting the width of the h1 failed.

2

The divs inside the .b div are still 100% wide, hence the drop. You could try something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>

    <style type="text/css">
      .a {
        display: inline-block; margin: 0; vertical-align: top;
      }

      .b, .b div {
        display: inline-block;width: 60px;
      }
    </style>
      
  </head>

  <body>
    <section>
      <h1 class="a">Greeting:</h1>
      <div class="b">
        <div>hello</div>
	<div>world</div>
      </div>
    </section>
  </body>

</html>
3

Ahh.

You could try something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>

    <style type="text/css">
      .a {
        display: inline-block; margin: 0; vertical-align: top;
      }

      .b, .b div {
        display: inline-block;width: 60px;
      }
    </style>
      
  </head>

  <body>
    <section>
      <h1 class="a">Greeting:</h1>
      <div class="b">
        <div>hello</div>
	<div>world</div>
      </div>
    </section>
  </body>

</html>

Thanks. :slight_smile:

4