How to align 2 divisions vertically in html

May 2, 2022

Right now I’m having a hard time aligning two divisions vertically, something like this:

But they are not being aligned like that and instead, they are being aligned like this horizontally:

And here is my code:

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

body {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: absolute;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818;
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

h2,
h1 {
  margin: 0;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div>
    <h1 class='main'>Hello 👋, I'm Saharsh.</h1>
    <h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1>
  </div>

  <div>
    <h1 class='subMain'>Another Division</h1>
  </div>
  <script src='Scripts/TypeDeleteText.js'>
  </script>
</body>

</html>

>Solution :

Your body is in flex put it in grid or add flex-direction: column; on your body. heres your code in grid.

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

body {
  height: 90vh;
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: absolute;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818; 
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% { opacity: 0; }
}

h2, h1 {
  margin: 0;
}

<!DOCTYPE html>
<html lang='en'>
    <head>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body>
        <div>
            <h1 class='main'>Hello 👋, I'm Saharsh.</h1>
            <h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1>
        </div>
        
        <div>
            <h1 class='subMain'>Another Division</h1>
        </div>
        <script src='Scripts/TypeDeleteText.js'>
        </script>
    </body>
</html>