How to Put Elements Directly Below Element

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

In this CodePen: https://codepen.io/dannyrb/pen/ORqvZy, 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>
  <p>HI</p>
</div>

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

.container-text{
  position:absolute;
  text-align:center;
  top:20%;
  width:100%;
  color:white;
  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.

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