CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
captain
captain

Reputation: 1827

How to put text on the right side of an <h> tag?

I'm creating a site and I'm stuck at a probably simple thing. I have an <h4> tag that says something and I want on the same line but some spaces to the right to have a <p> tag with some text in it. Whatever I do it either gets the text exactly next to the <h4> tag or when I do something like align:right it puts it under the <h4> tag. Here is my code:

<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <h4 style="display: inline">University</h4>
        <p style="align=right"> 2009 - 2015<br></p>
        <p style="display: inline">B.Sc in Computer Science</p>
        <p style="display: inline"> Grades: 2:1</p>
        <span>
            <h4>Highschool</h4>
            <p>2006 - 2009</p>
        </span>   
    </div>
</div>

I'm using bootstrap to do the grid layout. I don't know if this plays a role in this problem.

Upvotes: 2

Views: 10344

Answers (2)

totymedli
totymedli

Reputation: 31078

Without code structure change

Make the elements in the same line inline and just float your date range to the right.

.title-right {
    float: right;
}

.title-left {
    display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <h4 class="title-left">University</h4>
        <span class="title-right"> 2009 - 2015</span>
        <span>B.Sc in Computer Science</span>
        <span> Grades: 2:1</span>
        <span>
            <h4>Highschool</h4>
            <p>2006 - 2009</p>
        </span>   
    </div>
</div>

This way you don't have to include the date range in the header like in Maddy's answer, which works, but it isn't proper HTML5 semantics, because you include stuff in the header that doesn't goes there.

Also a few more things to consider:

  • Don't use paragraphs for things that are not paragraphs. You build up a line from multiple elements. That is what <span> is for. This way you also don't have to add display:inline everywhere.
  • Don't use inline styles. Create classes and add the styling over there.

Better code structure

Old school way

If you want to place everything in two column, just create <div>s for the lines and make the left side text inline while you float the right side text to the right.

.float-right {
    float: right;
}

.inline {
    display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <div>
            <h4 class="inline">University</h4>
            <span class="float-right"> 2009 - 2015</span>
        </div>
        <div>
            <span>B.Sc in Computer Science</span>
            <span class="float-right"> Grades: 2:1</span>
        </div>
        <div>
            <h4 class="inline">Highschool</h4>
            <p class="float-right">2006 - 2009</p>
        </div>
    </div>
</div>

New school way

With the same DOM as in the previous section you can just slap a flexbox to the row and align the children to the sides. This solution assumes that you have only 2 children, one for each side.

.side-layout {
    display: flex;
    justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <div class="side-layout">
            <h4>University</h4>
            <span> 2009 - 2015</span>
        </div>
        <div class="side-layout">
            <span>B.Sc in Computer Science</span>
            <span> Grades: 2:1</span>
        </div>
        <div class="side-layout">
            <h4>Highschool</h4>
            <p>2006 - 2009</p>
        </div>
    </div>
</div>

Upvotes: 5

Mukul Kant
Mukul Kant

Reputation: 7122

Use a span tag in h4 (heading) tag.

<div class="col-md-8">
  <h1 id="title">Education</h1>
  <h4 style="display: inline">University
    <span style="float:right"> 2009 - 2015</span>
  </h4>
  <p style="display: inline">B.Sc in Computer Science</p><p style="display: inline"> Grades: 2:1</p>
  <span>
    <h4>Highschool</h4>
    <p>2006 - 2009</p>
  </span>   
</div>

Upvotes: 1

Related Questions