How To Write Both H1 And H2 In The Same Line? - Stack Overflow

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How to write both h1 and h2 in the same line? Ask Question Asked 13 years, 10 months ago Modified 3 years, 2 months ago Viewed 186k times 49

I have a page and I want simply to make a header. This header is an <h1> text aligned to the left, and an <h2> aligned to the right, in the same line, and after them, an <hr>. My code so far look as follows (if you test it, you'll see that it's wrong):

<h1 align="left">Title</h1> <h2 align="right">Context</h2> <hr/>

Thanks guys!

• html
• css

Share Improve this question Follow edited Mar 21, 2019 at 14:48 Floern 33.9k2424 gold badges105105 silver badges121121 bronze badges asked Jan 19, 2011 at 14:00 Bruno Machado - vargeroBruno Machado - vargero 2,72066 gold badges3535 silver badges5252 bronze badges 2

• 2 do it with CSS h1 { float left; } hr { clear: left; } – javiertoledos Commented Jan 19, 2011 at 14:03
• just use` float: left` or display: inline-block h1,h2 elements css block – Md. Abu Sayed Commented Dec 23, 2020 at 13:05

Add a comment |

6 Answers 6

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 88

h1 and h2 are native display: block elements.

Make them display: inline so they behave like normal text.

You should also reset the default padding and margin that the elements have.

Share Improve this answer Follow answered Jan 19, 2011 at 14:01 PekkaPekka 449k148148 gold badges983983 silver badges1.1k1.1k bronze badges 5

• If I just set it to h1, it makes no diference at all, and if I do it for both, I lose the alignment. – Bruno Machado - vargero Commented Jan 19, 2011 at 14:03
• @Bruno I'm sorry, I misread your requirement. float will fix it, see @Floern's answer. – Pekka Commented Jan 19, 2011 at 14:04
• @Pekka웃, +1 For simple solution. You saved my time. – Ionică Bizău Commented Jan 16, 2013 at 18:07
• Actually this solution solves the problem better than the one marked as the answer. – Geeky Guy Commented Nov 20, 2013 at 19:58
• 1 As an example for other noobs like me (maybe someone will correct me), <h1 style="display: inline">Title</h1> <h2 style="display: inline">Context</h2> – bitcoder Commented Jul 20, 2016 at 19:21

Add a comment | 56

Keyword float:

<h1 style="text-align:left;float:left;">Title</h1> <h2 style="text-align:right;float:right;">Context</h2> <hr style="clear:both;"/> Share Improve this answer Follow answered Jan 19, 2011 at 14:02 FloernFloern 33.9k2424 gold badges105105 silver badges121121 bronze badges 5

• 1 @Pekka it doesn't need display:inline at all. In fact, it's useless because floated elements are always display:block. Additionally (@Floern), unless you are setting widths on the headings the text alignment is meaningless too. – DisgruntledGoat Commented Nov 30, 2012 at 11:24
• 1 Friggin perfect mate – Ben Commented May 1, 2018 at 15:57
• add margin-left:10px to h1, and margin-right:10px to h2 elements – Fuat Commented Jul 29, 2018 at 8:10
• 1 What does clear:both do? – Hlung Commented Jul 2, 2022 at 9:05
• what if its in the middle of each? – greendino Commented Mar 9, 2023 at 10:51

Add a comment | 8

In many cases,

display:inline;

is enough.

But in some cases, you have to add following:

clear:none; Share Improve this answer Follow edited Nov 17, 2013 at 6:35 BoltClock 722k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges answered Nov 30, 2012 at 11:11 namnam 38744 silver badges77 bronze badges 1

• Inline elements cannot clear floats, so whether you have clear: none or even something that isn't none on an inline element doesn't make a difference. – BoltClock Commented Nov 17, 2013 at 6:34

Add a comment | 5

You can use flexbox. So put the h1 and h2 in a container with an id of container then add this code:

#container { display: flex; justify-content: space-between; } Share Improve this answer Follow edited Sep 15, 2021 at 9:31 Abhinav 9722 silver badges1111 bronze badges answered May 7, 2018 at 20:57 r_zelaznyr_zelazny 55777 silver badges2020 bronze badges Add a comment | 2

In answer the question heading (found by a google search) and not the re-question To stop the line breaking when you have different heading tags e.g.

<h5 style="display:inline;"> What the... </h5><h1 style="display:inline;"> heck is going on? </h1>

Will give you:

What the...heck is going on?

and not

What the... heck is going on? Share Improve this answer Follow edited Dec 23, 2020 at 12:48 pert 8588 bronze badges answered Jun 25, 2019 at 14:19 GlenGlen 4911 gold badge22 silver badges1515 bronze badges Add a comment | -4 <h1 style="text-align: left; float: left;">Text 1</h1> <h2 style="text-align: right; float: right; display: inline;">Text 2</h2> <hr style="clear: both;" />

Hope this helps!

Share Improve this answer Follow answered Dec 16, 2012 at 0:04 BobBob 1 1

• float: right will negate the effects of display: inline, making it useless. – BoltClock Commented Nov 17, 2013 at 6:34

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css

or ask your own question.

• The Overflow Blog
• The app that fights for your data privacy rights
• Your docs are your infrastructure
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

0 How do I make a <h2> and a <button> appear on the same line?

Related

86 Two lines in h1 tag 10 Is there a way I can place text after an <h1> on the same line? 26 H1 tag and P tag on the same line? 0 Why does my h2 not stay on a single line? 0 Div and H2 appearing in same line 0 How to keep two different header (h2) tags on one line? 0 How to make h1 and h1 both render on the same line 2 Styling h1 and h2 inside same class 0 H2 and P on same line (HTML, CSS, PHP) 0 How to add new line in html between h1 and h2

Hot Network Questions

• Wouldn't the ban of TikTok violate freedom of speech?
• A new command for hanging indentation works in LaTeX but not in Pandoc for some reason
• See me Once, See me Twice #16
• What's the deal with Tex Live and cmunrm.otf?
• Am I correct in assuming during the merger with the Milky Way the structure of the Andromeda Galaxy will not be visible to the naked eye?
• TNG episode- Dr. Pulaski instructs another doctor on a sling
• If I am forced to change the impedance of transmission line, how to continue?
• Do the surreal numbers enjoy the transfer principle in ZFC?
• Can you please advise on kerning?
• Why Adam and Eve were created naked?
• A dark animated movie about an orphaned girl working in an oppressive factory
• Does General Relativity "break" Ergodicity?
• Brushing pastries with jam
• Why did General Groves mention the baby delivery count here?
• Did Superdana manufacture a 66 AC outlet power strip/surge protector?
• Why is it safe to soak an electric motor in isopropyl alcohol but not distilled water?
• Can objective epistemic probabilistic comparisons be established between metaphysical worldviews?
• How to attribute authorship to personal non-academic friend who made significant contributions
• What does GB Shaw mean when he says "like the butcher's wife in the old catch" here?
• Uk exhibition pass query impact
• Identifying parts of multipart line in QGIS
• H-bridge transistors are too hot
• Did renaissance actors learn their parts by heart?
• Infinite series and sum of two squares

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html