Why should I set the width of the header to be larger than the body in order to fully cover it?

Question

Why should I set the width of the header to be larger than the body in order to fully cover it?

I've set my header width to 106% to span the entire page length, while the max-width for my body is kept at 95%.

body {
  background-color: #333;
  max-width: 95%;
  font-family: ivyjournal, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  width: 106%;
  position: relative;
  font-family: ivyjournal, sans-serif;
  background-color: black;
  margin: 0 auto;
}

h1 {
  color: white;
  position: relative;
  font-size: 400%;
  font-decoration: none;
  font-style: italic;
  font-weight: lighter;
  left: 50px;
  top: 10px;
  padding: 0;
  margin: 0 auto;
}

<body>
  <header>
    <div class="text-logo">
      <h1>E.D.D</h1>
    </div>
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a>
          <li>
            <li class="Dropdown">More</li>
      </ul>
    </div>
  </header>

  </html>

I've been experimenting with this setup for some time now, but I haven't come across any solutions that address my specific issue. Any insights would be greatly appreciated. Thanks!

html css

Answer 1

Answer №1

Using % to set width refers to the width of its container, not necessarily the entire page. For more information, you can visit this link.

Have you experimented with using rem (root-relative) or vw (viewport-relative width) instead of relying solely on %? Just a thought.

Answer 2

Using % to set width refers to the width of its container, not necessarily the entire page. For more information, you can visit this link.

Have you experimented with using rem (root-relative) or vw (viewport-relative width) instead of relying solely on %? Just a thought.

Answer 3

Answer №2

When working with CSS, using percentage units will result in the size of the element being relative to its parent element.

Consider your outermost element, the body, which has a max-width set to 95%. This means it will occupy 95% of the width of the browser window.
Now, imagine the header element within the body. If its width is defined as 106%, then it will actually be 106% of 95% of the browser window's width. 106% * 95% = 100.7 %. Ultimately achieving the desired outcome of occupying 100% of the browser width through this indirect method.

Instead of relying on parent elements for sizing, it's more efficient to base them on the browser viewport itself using the vw (view width) and vh (view height) units.

Here's an example:

header {
  width: 88vw;    /* Setting the header width to 88% of the browser width. */
}

Answer 4

When working with CSS, using percentage units will result in the size of the element being relative to its parent element.

Consider your outermost element, the body, which has a max-width set to 95%. This means it will occupy 95% of the width of the browser window.
Now, imagine the header element within the body. If its width is defined as 106%, then it will actually be 106% of 95% of the browser window's width. 106% * 95% = 100.7 %. Ultimately achieving the desired outcome of occupying 100% of the browser width through this indirect method.

Instead of relying on parent elements for sizing, it's more efficient to base them on the browser viewport itself using the vw (view width) and vh (view height) units.

Here's an example:

header {
  width: 88vw;    /* Setting the header width to 88% of the browser width. */
}

Answer 5

Answer №3

Welcome to the world of coding! It seems like you may be having some issues with your HTML structure. Take a look at my code below for guidance on how to set up your layout correctly. Notice how the width is set to 100%.

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="../styles/style.css">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 <title>Title</title>
</head>    
<body>
 <header>
  <div id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a>
      <li class="Dropdown"><a href="#">More</a></li>
    </ul>
   </div> 
  </header>
  <div class="text-logo">
    <h1>E.D.D</h1>
  </div>    
</body>
</html>

CSS:

            h1 {
                color: white;
                position: relative;
                font-size: 400%;
                text-decoration: none;
                font-style: italic;
                font-weight: lighter;
                left: 50px;
                top: 10px;
                padding: 0;
                margin: 0 auto;
            }

            body {
                background-color: #333;
                max-width: 100%;
                font-family: ivyjournal, sans-serif;
                padding: 0;
                overflow-x: hidden;
            }

            header {
                width: 100%;
                height: 40%;
                position: relative;
                font-family: ivyjournal, sans-serif;
                background-color: black;
                margin: 0 auto;
            }

If you're interested in learning more about creating dropdown menus and other web elements, I recommend checking out Bootstrap's documentation here: https://getbootstrap.com/docs/4.1/getting-started/introduction/

Answer 6

Welcome to the world of coding! It seems like you may be having some issues with your HTML structure. Take a look at my code below for guidance on how to set up your layout correctly. Notice how the width is set to 100%.

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="../styles/style.css">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 <title>Title</title>
</head>    
<body>
 <header>
  <div id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a>
      <li class="Dropdown"><a href="#">More</a></li>
    </ul>
   </div> 
  </header>
  <div class="text-logo">
    <h1>E.D.D</h1>
  </div>    
</body>
</html>

CSS:

            h1 {
                color: white;
                position: relative;
                font-size: 400%;
                text-decoration: none;
                font-style: italic;
                font-weight: lighter;
                left: 50px;
                top: 10px;
                padding: 0;
                margin: 0 auto;
            }

            body {
                background-color: #333;
                max-width: 100%;
                font-family: ivyjournal, sans-serif;
                padding: 0;
                overflow-x: hidden;
            }

            header {
                width: 100%;
                height: 40%;
                position: relative;
                font-family: ivyjournal, sans-serif;
                background-color: black;
                margin: 0 auto;
            }

If you're interested in learning more about creating dropdown menus and other web elements, I recommend checking out Bootstrap's documentation here: https://getbootstrap.com/docs/4.1/getting-started/introduction/

Why should I set the width of the header to be larger than the body in order to fully cover it?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

Verify the level of opacity in the image

Maintain the alignment of content in the center while expanding background images

Is it necessary for a click handler to be triggered when clicking on a scrollbar?

Implement various actions when the window is resized

Eliminate spaces within a string using JavaScript

What is the best way to utilize the features of component A within component B when they exist as separate entities

What is the best way to utilize $(target) within a directive?

What is the best way to show a border-left outside of the list marker in Internet Explorer 8?

both modules loading at the same time in AngularJS

Two challenges I encountered with my CSS dropdown menu bar

Scrolling down a jQuery div after each new item is added.OR

Utilizing the power of JQuery AJAX and PHP to retrieve information from a MySQL database

Extract image file name and date information (day, month, year) from an HTML form using Angular

Utilize the data-toggle attribute to retrieve a unique variable name, which can then be integrated into a function for added

Arrange various numbers in a single row to be in line with

Guide on creating 2 select inputs with distinct elements?

Broken link in navigation bar

Looking to troubleshoot the selenium error in a loop, specifically the InvalidSelectorException that states: "invalid selector: Unable to find element with the specified xpath"?

Storing User Information in Cookies using jQuery