how to have two headings on the same line in html

Question

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 from this HR    I tried making them both inline and have one float right and the other left  The problem with doing so was with h3 as it is smaller than h2 vertically it was centered at half the h2 s length   h2 was kinda like sitting on the hr and h3 kinda looked like floating in mid air   I kinda wanted them to be like both sitting on the hr   h2  display inline  float left    h3  display inline  float right      I was talking about visually describing the situation

User · Answer

Add a span with the style  float  right  element inside the h1 element  So you can add a  goto top of the page  link  with a unicode arrow link button    lt h1 id  myAnchor  gt Headline Text  lt span style  float  right  gt  lt a href   top  aria-hidden  true  gt   lt  a gt  lt  span gt   lt  h1 gt

User · Answer

You d need to wrap the two headings in a div tag  and have that div tag use a style that does clear  both  e g    lt div style  clear  both  gt       lt h2 style  float  left  gt Heading 1 lt  h2 gt       lt h3 style  float  right  gt Heading 2 lt  h3 gt   lt  div gt   lt hr   gt    Having the hr after the div tag will ensure that it is pushed beneath both headers   Or something very similar to that  Hope this helps

User · Answer

You should only need to do one of    Make them both inline  or inline-block  Set them to float left or right   You should be able to adjust the height  padding  or margin properties of the smaller heading to compensate for its positioning   I recommend setting both headings to have the same height   See this live jsFiddle for an example    code of the jsFiddle    CSS  h2     font-size  50px     h3     font-size  30px     h2  h3     width  50     height  60px    margin  0    padding  0    display  inline       HTML   lt h2 gt Big Heading lt  h2 gt   lt h3 gt Small er  Heading lt  h3 gt   lt hr   gt

User · Answer

Display property  inline-block  will place both headers next to each other  You can run this code snippet to see it  x000D   x000D   lt h1 style  display  inline-block   gt Text 1 lt  h1 gt   lt h1 style  display  inline-block   gt Text 2 lt  h1 gt  x000D   x000D   x000D

User · Answer

The following code will allow you to have two headings on the same line  the first left-aligned and the second right-aligned  and has the added advantage of keeping both headings on the same baseline   The HTML Part    lt h1 class  text-left-right  gt       lt span class  left-text  gt Heading Goes Here lt  span gt       lt span class  byline  gt Byline here lt  span gt   lt  h1 gt    And the CSS    text-left-right       text-align  right      position  relative     left-text       left  0      position  absolute     byline       font-size  16px      color  rgba 140  140  140  1

User · Answer

Check my sample solution   lt h5 style  float  left  width  50    gt Employee  Employee Name lt  h5 gt   lt h5 style  float  right  width  50   text-align  right   gt Employee  Employee Name lt  h5 gt    This will divide your page into two and insert the two header elements to the right and left part equally

User · Answer

The Css vertical-align property should help you out here   vertical-align  bottom    is what you need for your smaller header     Vertical-Align

[html] how to have two headings on the same line in html

Examples related to html

Examples related to css

Examples related to html-heading