How to Put Elements Directly Below Element

by Shawn Zhang   Last Updated July 13, 2019 01:26 AM

In this CodePen:, I wish to add elements (e.g., a divider line and more text) directly below the title ("FULL STACK"). However, when I add something like

<h1 class="title">Full Stack</h1>
<p style="color:white;"> Sample Text. Sample Text. Sample Text.</p>

That sample text appears below the container (underneath the mountains). How can I add this directly underneath the title (without the manual use of position: absolute)?

Tags : html css

Answers 2

Just wrap all of your text in a div and position that div in your container. So so something like the following:

<div class="container-text">
  <h1 class="title">Full Stack</h1>

and then your css would be

.title {
  font-family: 'Megrim', Georgia, serif;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: .3em;

  /* Smooth our font */
  text-transform: uppercase;
  text-shadow: 1px 2px 1px rgba(black, .2);
   -webkit-font-smoothing: antialiased;

  margin: 0; padding: 0;

  z-index: 100;
Steve K
Steve K
July 12, 2019 23:02 PM

Yes, I agree with the previous answer. Playing with the .title class on your codepen, I reassigned it to a DIV and put H2 and P elements inside. I also converted your font-size and line-height for the div.title element to use EMs, so that you can easily style the H2 and P elements to taste.

July 13, 2019 01:24 AM

Related Questions

parsing/extracting a HTML Table, Website in Java

Updated July 11, 2015 20:11 PM

What do &lt; and &gt; stand for?

Updated October 31, 2017 15:26 PM