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

Align header at the top of the container in HTML/CSS?

I’m currently working on a project where I have a header that I’d like to position at the top of a container in my HTML/CSS layout. However, the header is currently appearing on the left side, and I want it to be at the top.
this is my HTML

<div class="container">
  <div class="header">
    <h3 id="one">Email us</h3>
    <h3 id="two">Leave a comment</h3>
    <h3 id="name">WriteWave</h3>
  </div>

  <!-- Rest of the content -->
</div>

And this is my CSS

.container {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%; /* Adjust the width as needed */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.header {
  padding: 20px;
  border: 2px solid #dbdbdb;
  border-radius: 5px;
  margin-bottom: 10px;
}

I’ve attempted to style the header and container, but the header is still positioned on the left side. How can I modify the HTML/CSS to ensure that the header appears at the top of the page?

I would like the header to be at the top of the page, centered horizontally, and maintaining its current styling.

Tags:

3

Answers


  1. 0

    I don’t know if I understood what you’re trying to do. If I understood right, you want to position the header container on the top and I assume in the middle, if you want to do that, what you need to do is add margin: 0 auto; in the header container’s css code.

    Otherwise if you just want to display it on the top, you can use display: flex like you used in the .container class. The default direction of the flex, when displaying it, is row, so you need to specify if you want it on column, like so flex-direction: column, and then the first container in a parent, is always gonna be on top of others. If you also want to center you can add align-items: center and it’s gonna be centered in the container.

    If you want to read more about flexbox, check this out : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Also small tip, don’t use absolute values, like px in this case, you should use dynamic values such as em, rem, percentages(%) etc… it’s good practice when working towards building a responsive web application.

    Login or Signup to reply.
  2. 0

    code is working fine, once check the cdn links.

    Login or Signup to reply.
  3. 0

    First of all, I highly suggest you go over some tutorials (freeCodeCamp or such) on HTML and CSS.
    You are trying to apply justify-content, but you only have one element inside the container (your header div), therefore nothing happens.
    I think you are trying something like this:

    *,html, body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%; /* Adjust the width as needed */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
header a {
font-size: 1.3rem;
text-decoration: none;
}
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
          <a href="" id="one">Email us</a>
          <a href="" id="two">Leave a comment</a>
          <a href="" id="name">WriteWave</a>
      
        <!-- Rest of the content -->
    </header>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search