CODEWITHSUNDEEP
htmlcss
CodeZip
CodeZip

Reputation: 3

Element in the body section of html to be at the top of the page, while all other elements are at the center

I'm new to HTML/CSS. In my body section, I had a div with a bunch of elements inside that was in the middle of the page. I attempted to add a header with a navbar and logo to the body, but I cannot figure out how to place the header at the top of the page while keeping the div in the middle.

Here's the HTML & CSS code for the body (contains the div and header), the div (called container), and the header

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #03a9f4;
  transition: 1s;
  flex-direction: column;
}

.container {
  position: relative;
  width: 800px;
  height: 400px;
  background: rgba(0, 0, 0, 0.125);
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}
<header>
  <img class="logo" src="images/logo.png" alt="logo" />
  <nav>
    <ul class="nav_links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Create</a></li>
      <li><a href="#">Help Listings</a></li>
    </ul>
  </nav>
  <button class="cta">Contact</button>
</header>
<div class="container">
  <div class="box signin">
    <h2>Already Have An Account?</h2>
    <button class="signinBtn">Sign In</button>
  </div>
  <div class="box signup">
    <h2>Don't Have An Account?</h2>
    <button class="signupBtn">Sign Up</button>
  </div>
  <div class="formBx">
    <div class="form signinform">
      <form>
        <h3>Sign In</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <input type="submit" value="Login">
        <a href="#" class="forgot">Forgot Password</a>
      </form>
    </div>
    <div class="form signupform">
      <form>
        <h3>Sign Up</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Email Address">
        <input type="password" placeholder="Password">
        <input type="password" placeholder="Confirm Password">
        <input type="submit" value="Register">
        <!-- give a warning if the user has caps lock on -->
      </form>
    </div>
  </div>
</div>

Here's what it looks like:

enter image description here

How do I put the logo, navbar, and contact buttons at the top of the page while keeping the sign-in box in the middle?

Upvotes: 0

Views: 63

Answers (1)

Md. Rakibul Islam
Md. Rakibul Islam

Reputation: 2311

Setting the position of the header to absolute will bring it out of the normal document flow and then top: 0 will put it at the top.

header {
  position: absolute;
  top: 0;
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #03a9f4;
  transition: 1s;
  flex-direction: column;
}

.container {
  position: relative;
  width: 800px;
  height: 400px;
  background: rgba(0, 0, 0, 0.125);
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  position: absolute;
  top: 0;
}
<header>
  <img class="logo" src="images/logo.png" alt="logo" />
  <nav>
    <ul class="nav_links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Create</a></li>
      <li><a href="#">Help Listings</a></li>
    </ul>
  </nav>
  <button class="cta">Contact</button>
</header>
<div class="container">
  <div class="box signin">
    <h2>Already Have An Account?</h2>
    <button class="signinBtn">Sign In</button>
  </div>
  <div class="box signup">
    <h2>Don't Have An Account?</h2>
    <button class="signupBtn">Sign Up</button>
  </div>
  <div class="formBx">
    <div class="form signinform">
      <form>
        <h3>Sign In</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <input type="submit" value="Login">
        <a href="#" class="forgot">Forgot Password</a>
      </form>
    </div>
    <div class="form signupform">
      <form>
        <h3>Sign Up</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Email Address">
        <input type="password" placeholder="Password">
        <input type="password" placeholder="Confirm Password">
        <input type="submit" value="Register">
        <!-- give a warning if the user has caps lock on -->
      </form>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions