How can I place two headings next to each other using CSS?

html css html-heading
w35t picture w35t · Aug 18, 2009 · Viewed 26.2k times · Source 
<h5>Category</h5><h6>auto</h6>

places Category and auto on separate lines, like this:

Category

auto

How can I place them both on the same line, like this?

Category auto

Answer

Rex M picture Rex M · Aug 18, 2009

h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next line.

One easy way to accomplish this is to set their display to inline:

<style>
    h5, h6 {display:inline;}
</style>

Note that inline-block is not supported in all browsers.

You can also float block elements, but that can become a sticky issue as floating can be fairly complex. Stick with inline for cases like this.

Related questions

How can I remove space (margin) above HTML header?

I am creating a website. I have written the HTML part and now I am writing the stylesheet. But there is always some space above my header. How can I remove it? My HTML and CSS code is given below.

Read More
how to have two headings on the same line in html

I want to have two headings h2 and h3 on the same horizontal rule one on the left and the other on the right. They have a HR underneath them and I want them to be at the same distance …

Read More
Is it possible to create html tags h7, h8, h9 and so on

Here's a novice question. Is it possible to create more heading styles like h7, h8, and so on. I am just wondering if it possible to have more than 6 different types of headings on a website.

Read More