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

CodeZip
July 14, 2023
208 views
1 vote
2 Answers

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:

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?

Tags: css html

Answers

You can make use of CSS flexbox properties for the desired layout. Such as :

It will resolve your issue.

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

    .container {
        position: relative;
        width: 800px;
        height: 400px;
flex-direction: row-reverse; 
        background: rgba(0, 0, 0, 0.125);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
    }
    header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 10%;
        }


And in the body add:

<body>
    <header>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li><a href="#">page1</a></li>
                <li><a href="#">page2</a></li>
            </ul>
        </nav>
        <button>Submit</button>
    </header>


</body>
</html>

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>

Please signup or login to give your own answer.

Click here to cancel reply.