Text on the left

Question

What I am trying to do here is to align the text "Typerore" to the top left corner, but the text is positioned in the left center.

I tried using the "left:" tag in CSS, but that did not work, I also tried using "float:left" but that did not work either.

I was wondering what tag do I need to use to align the div "title" to the top left.

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: coral;
}

body,
.quote-input {
  font-family: 'Fredoka', sans-serif;
}

.container {
  background-color: lightgrey;
  padding: 1rem;
  border-radius: .5rem;
  width: 700px;
  max-width: 90%;
}

.timer {
  position: absolute;
  top: 2rem;
  font-size: 3rem;
  color: grey;
  font-weight: bold;
}

.quote-display {
  margin-bottom: 1rem;
  margin-left: calc(1rem + 2px);
  margin-right: calc(1rem + 2px);
}

.quote-input {
  background-color: transparent;
  border: 2px solid #A1922E;
  outline: none;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .5rem;
}

.quote-input:focus {
  border-color: black;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}


/* Background Styles Only */

* {
  font-family: 'Fredoka', sans-serif;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

.title {
  left: 3rem;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<div id="title">
  <h1>Typerore</h1>
</div>
<div class="timer" id="timer"></div>
<div class="container">
  <div class="quote-display" id="quoteDisplay"></div>
  <textarea id="quoteInput" class="quote-input" autofocus></textarea>
  <script src="script.js"></script>
</div>

Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) — m.rp, Mar 08 '22 at 22:50

Kameron · Answer 1 · 2022-03-07T16:20:28.383

Set height of #title to rendered height of container. Then to get the text at the very top corner you will have to remove the default margin on h1.

* {
  box-sizing: border-box;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: coral;
}

body {
  margin: 0;
}

body,
.quote-input {
  font-family: 'Fredoka', sans-serif;
}

.container {
  background-color: lightgrey;
  padding: 1rem;
  border-radius: .5rem;
  width: 700px;
  max-width: 90%;
}

.timer {
  position: absolute;
  top: 2rem;
  font-size: 3rem;
  color: grey;
  font-weight: bold;
}

.quote-display {
  margin-bottom: 1rem;
  margin-left: calc(1rem + 2px);
  margin-right: calc(1rem + 2px);
}

.quote-input {
  background-color: transparent;
  border: 2px solid #A1922E;
  outline: none;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .5rem;
}

.quote-input:focus {
  border-color: black;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}


/* Background Styles Only */

* {
  font-family: 'Fredoka', sans-serif;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

#title {
  left: 3rem;
  height: 180px;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<div class="main">
  <div id="title">
    <h1 style="margin: 0;">Typerore</h1>
  </div>
  <div class="timer" id="timer"></div>
  <div class="container">
    <div class="quote-display" id="quoteDisplay"></div>
    <textarea id="quoteInput" class="quote-input" autofocus></textarea>
    <script src="script.js"></script>
  </div>
</div>

mplungjan · Answer 2 · 2022-03-07T15:21:19.890

You can add a margin

Also do use divs instead of making the whole body flex

Lastly you had .title instead of #title in the CSS

* {
  box-sizing: border-box;
}

#main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: coral;
}

body,
.quote-input {
  font-family: 'Fredoka', sans-serif;
}

.container {
  background-color: lightgrey;
  padding: 1rem;
  border-radius: .5rem;
  width: 700px;
  max-width: 90%;
}

.timer {
  position: absolute;
  top: 2rem;
  font-size: 3rem;
  color: grey;
  font-weight: bold;
}

.quote-display {
  margin-bottom: 1rem;
  margin-left: calc(1rem + 2px);
  margin-right: calc(1rem + 2px);
}

.quote-input {
  background-color: transparent;
  border: 2px solid #A1922E;
  outline: none;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .5rem;
}

.quote-input:focus {
  border-color: black;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}


/* Background Styles Only */

* {
  font-family: 'Fredoka', sans-serif;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

#title {
  left: 3rem;
  margin-bottom: 8rem;
  margin-right: 1rem;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<div id="main">
  <div id="title">
    <h1>Typerore</h1>
  </div>
  <div class="timer" id="timer"></div>
  <div class="container">
    <div class="quote-display" id="quoteDisplay"></div>
    <textarea id="quoteInput" class="quote-input" autofocus></textarea>
    <script src="script.js"></script>
  </div>
</div>

score 0 · Answer 3 · answered Mar 07 '22 at 14:48

:D

I Made a Quick solve for you (maybe no the best, but works fine), i changed "id=title" to "class=title" because you use the dot (.title) in css file.

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: coral;
}

body,
.quote-input {
  font-family: 'Fredoka', sans-serif;
}

.container {
  background-color: lightgrey;
  padding: 1rem;
  border-radius: .5rem;
  width: 700px;
  max-width: 90%;
}

.timer {
  position: absolute;
  top: 2rem;
  font-size: 3rem;
  color: grey;
  font-weight: bold;
}

.quote-display {
  margin-bottom: 1rem;
  margin-left: calc(1rem + 2px);
  margin-right: calc(1rem + 2px);
}

.quote-input {
  background-color: transparent;
  border: 2px solid #A1922E;
  outline: none;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .5rem;
}

.quote-input:focus {
  border-color: black;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}


/* Background Styles Only */

* {
  font-family: 'Fredoka', sans-serif;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

.title {
  margin-bottom: 150px;
  margin-right: 5px;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Typerore</title>
</head>

<body>
  <div class="title">
    <h1>Typerore</h1>
  </div>
  <div class="timer" id="timer"></div>
  <div class="container">
    <div class="quote-display" id="quoteDisplay"></div>
    <textarea id="quoteInput" class="quote-input" autofocus></textarea>
    <script src="script.js"></script>
  </div>
</body>

</html>

Text on the left

3 Answers3