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

Community
  • 1
  • 1
w35t
  • 293
  • 3
  • 4
  • 11

3 Answers3

29

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.

Rex M
  • 142,167
  • 33
  • 283
  • 313
7
<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>
  • inline-block is not supported in all browsers. – Rex M Aug 18 '09 at 14:43
  • This is possible, however using inline styles is not a recommended way of working. Your solution is not wrong, but I think it is better to show a much nicer way of working by using stylesheets or a style definition on top of the document. – Gertjan Aug 18 '09 at 14:44
  • 2
    for IE, 'inline-block' is restricted to – Chris Ballance Aug 18 '09 at 14:45
  • 1
    @ertjan: I agree. It was just a minimalistic version to communicate the idea. –  Aug 18 '09 at 15:01
3

You must change the display mode of the elements. H tags are rendered as BLOCK elements by default. To override this behavior add the following style definitions to your website or CSS

h5,h6 { display: inline; }

You can also decide to let them "float" next to each other you can do that via:

h5,h6 { float: left; }

Please note that floating only works on block elements (so using both styles will perform no float because inline elements cannot float).

Gertjan
  • 850
  • 6
  • 9