CODEWITHSUNDEEP
htmlcsshtml-heading
Aditya Sastry
Aditya Sastry

Reputation: 401

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

Upvotes: 30

Views: 172540

Answers (7)

Maxim Vershinin
Maxim Vershinin

Reputation: 643

Display property 'inline-block' will place both headers next to each other. You can run this code snippet to see it

<h1 style="display: inline-block" >Text 1</h1>
<h1 style="display: inline-block" >Text 2</h1>

Upvotes: 6

KargWare
KargWare

Reputation: 2193

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.

<h1 id="myAnchor">Headline Text
<span style="float: right"><a href="#top" aria-hidden="true">↥</a></span>
</h1>

Upvotes: 2

ianmightknow
ianmightknow

Reputation: 21

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:

<h1 class="text-left-right">
    <span class="left-text">Heading Goes Here</span>
    <span class="byline">Byline here</span>
</h1>

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);
}

Upvotes: 2

Tibs
Tibs

Reputation: 775

Check my sample solution

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>

This will divide your page into two and insert the two header elements to the right and left part equally.

Upvotes: 4

Wampie Driessen
Wampie Driessen

Reputation: 1710

The Css vertical-align property should help you out here:

vertical-align: bottom;

is what you need for your smaller header :)

Vertical-Align

Upvotes: 4

twilson
twilson

Reputation: 2062

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:

<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

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.

Upvotes: 39

Jon Newmuis
Jon Newmuis

Reputation: 26530

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

<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />​

Upvotes: 13

Related Questions