CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 967

Align H1 Header and Normal Text in Same Line

I'm trying to have a H1 header and regular text on the same line, with a line under it, like so:

enter image description here

I have tried below code, but have been unsuccessful. What am I doing wrong?

<div style="border-bottom:1px;"> 
    <div align="left"><h1>Header</h1></div>
    <div align="right">Regular Text Goes Here</div>
</div>

Upvotes: 38

Views: 123256

Answers (6)

Jess
Jess

Reputation: 25079

I came up with a simple solution. My requirements are slightly different in that I want my status right aligned.

.my-header h2 { 
  display: inline;
}
.my-header span { 
  float: right;
}
<div class="my-header">
    <h2>Title</h2>
    <span>Status</span>
</div>
<div style="clear:both"></div>

Upvotes: 7

Matteus Hemstr&#246;m
Matteus Hemstr&#246;m

Reputation: 3845

Original answer (still working just fine)

See the snippet below. The idea is to make the <h1> inline to allow the second text to be at the same line.

header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }
<header>
  <h1>Text</h1>
  <span>text2</span>
</header>

2020 Update

See the snippet the snippet below that makes use of Flexbox. So instead of setting the h1 to an inline-block, you can make the header a flex container. A flex container will (by default) layout its children on a horizontal axis.

Note that you also need align-items: center to keep the h1 and span on the same vertical axis. Also, note that you might want align-items: baseline if you want the texts to appear on the same baseline (like my original answer).

header {
  display: flex;
  align-items: center;
  
  /* Remove the next line if you want the span to appear next to the h1 */
  justify-content: space-between;
  
  border-bottom: 1px solid #000;
  padding: 10px 30px;
}
<header>
  <h1>Text</h1>
  <span>at the end</span>
</header>

Upvotes: 46

Mark Stewart
Mark Stewart

Reputation: 11

There are two methods to accomplish H1 and TEXT inline. To clarify, TXT is in an element container. You suggest DIV, but any symantic element will do. Below, h1 and p illustrate a common use, while showing that you need not hide from element blocking, using DIV's (though divs are pandemic for many javascript coders).

Method 1

.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">

Method 2

h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7778

I think you should write like this :-

HTML

<div style="border-bottom:1px solid black; overflow:hidden;"> 
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>

CSS

h1 {
float:left;
  margin:0px;
  padding:0;
}
.right {
float:right;
  margin:0px;
  padding:0px;
}

DEMO

EVEN YOU CAN USE THIS METHOD ALSO WITH MINIMIZED MARKUP :- DEMO

Upvotes: 0

cjamesm
cjamesm

Reputation: 109

Try 

<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>

instead?

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

Add this line border-bottom:1px solid #000

<div style="border-bottom:1px solid #000;"> 
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>

DEMO

Use class name instead of inline-style.

Upvotes: 3

Related Questions