Html Question posted in
Some basic documentation can be found here.

Html – CSS flexbox working when applied to whole <body> but not on a specific div container

#title-row {
    display: flex;
    justify-content: center;
    width: 100vh;
    text-align: center;
    height:100vh;
  }

.title-img {
    z-index:1;
    position: absolute;
    left: 0;
    top: 0;
  }
.title-row > p {
    z-index: 2;
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 135px;
    top: 130px;
  }
body {
    display: flex;
    justify-content: center;
    height: 100vh;
  }
<body>
  <div>
    <div class="title-row">
      <img src="images/png.png">
      <p>THE TITLE</p>
      <div></div>
    </div>
    <div class="content">
      <div class="book"><p>Book1 <br>By author1</p></div>
      <div class="book"><p>Book2<br>By author2</p></div>
      <div class="book"><p>Book3<br>By author3</p></div>
      <div class="book"></div>
      <div class="book"></div>
      <div class="book"></div>
    </div>
  </div>
</body>

If I comment out the css for the body, the image and title on top of the img go back to top left position. But it works when applied to the body (which I don’t want because I would rather the flex applied only to the title portion so I can work with grids for the main content. )

PS:I’m a beginner, just learnt flexbox and started grids so I apologize if this is an easy question, but I would really appreciate an explanation. Also, this obv isn’t complete, I just want the title portion to work before I move onto the content.

tldr, Tried commenting out the body and applying flex to the title container only.

Tags:

2

Answers


  1. 0

    You are applying display ‘flex’ to ‘#title-row’. But there is no div with id ‘title-row’. You have a div with classname ‘title-row’. So try changing #title-row with .title-row.

    Login or Signup to reply.
  2. 0

    You used #title-row. Note that #title-row targets an id! Common mistake! Make sure to check your code more carefully; it happens to everyone!

    .title-row {
    display: flex;
    justify-content: center;
    width: 100vh;
    text-align: center;
    height:100vh;
  }

.title-img {
    z-index:1;
    position: absolute;
    left: 0;
    top: 0;
  }
.title-row > p {
    z-index: 2;
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 135px;
    top: 130px;
  }
body {
    display: flex;
    justify-content: center;
    height: 100vh;
  }
    <body>
  <div>
    <div class="title-row">
      <img src="images/png.png">
      <p>THE TITLE</p>
      <div></div>
    </div>
    <div class="content">
      <div class="book"><p>Book1 <br>By author1</p></div>
      <div class="book"><p>Book2<br>By author2</p></div>
      <div class="book"><p>Book3<br>By author3</p></div>
      <div class="book"></div>
      <div class="book"></div>
      <div class="book"></div>
    </div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search