CODEWITHSUNDEEP
htmlwordpresscss
Jason Weber
Jason Weber

Reputation: 5741

How to display a header inline with paragraph text using divs or an alternative method

I have this simple snippet in a WordPress widget:

 <h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2>

The name is changed for privacy. Is there any possible way I get get these to appear on the same line?

I'm a CSS dummy, but I've tried doing things like:

 <div display:inline><h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2></div>

But this doesn't work for reasons that are most likely obvious to CSS gurus.

Any guidance in how I can achieve putting these on the same line would be greatly appreciated!

* UPDATED SOLUTION *

For anybody with similar issues, I just used this -- with the help of @antyrat and @jacefarm:

<div style="display:inline">Kevin Smith</div><p style="display:inline">The Official  
Kevin Smith Website</p>

That way, I was able to style the div differently than the p, and they're both inline -- which is precisely what I was attempting to achieve.

Upvotes: 18

Views: 45226

Answers (3)

Merchako
Merchako

Reputation: 889

According to the spec, you're looking for display:run-in as described in this StackOverflow question. For you, that would look like:

h2 { display:run-in; }
p  { display:block; } // default
<h2>Kevin Smith</h2>
<p>The Official Kevin Smith Website</p>

Unfortunately, that code snippet won't work. That's because, practically, most of the browsers have abandonded display:run-in, even ones that previously had it. 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 the typographical behavior you're asking for.

This question gives links to other threads that have tried workarounds.

Upvotes: -3

jacefarm
jacefarm

Reputation: 7411

Inline styles on HTML elements are written as HTML attributes. You would use the 'style' attribute and give it a value that is wrapped in quotes. Also, you need to have a semi-colon after each CSS '[property]: [value];' pair passed into the 'style' attribute, just like you would in a standard CSS stylesheet.

    <div>
       <h3 style="display: inline;">Kevin Smith</h3>
       <h2 style="display: inline;">The Official Kevin Smith Website</h2>
    </div>

Alternatively, you could assign a class to the parent 'div' element, such as 'title', and then style the 'h3' and 'h2' tags in your CSS stylesheet, like this:

HTML

    <div class="title">
       <h3>Kevin Smith</h3>
       <h2>The Official Kevin Smith Website</h2>
    </div>

CSS

    .title h2,
    .title h3 {
      display: inline;
    }

Upvotes: 19

antyrat
antyrat

Reputation: 27765

You need to use style attribute:

<div style="display:inline">

Upvotes: 6

Related Questions