Ensure that the fixed header's width matches the size of the container div

Question

Ensure that the fixed header's width matches the size of the container div

The header element is contained within a div. I have positioned the header as fixed, leading to 2 issues:

The width of the header extends beyond the width of the div container. It should align with the div.
When the header is fixed, the other elements like nav and article are not visible.

Current appearance: https://i.sstatic.net/EO6D8.png

Desired appearance: https://i.sstatic.net/6SIko.png

Below is the code snippet:

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}
header{
   position:fixed;
   width:100%;
   right:0px;
}
header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

html css

Answer 1

Answer №1

Here is the solution you were looking for:

header {
/* The rest of the code remains unchanged */
position: relative;
}
header,footer {
/* The rest of the code remains unchanged */
padding: 1em 0;
}

You have specified that the div width should be 100%, with the header width being set to 100% of its parent, and then applied padding left and right of 1em (padding: 1em -> pads all four sides, padding: 1em 0 -> top & bottom 1em, left & right 0).
Why did you set it as fixed? Are you intending for the header to stick to the top?

div.container {
  width: 100%;
  border: 1px solid gray;
}
header{
  position:fixed;
  width:100%;
}
header, footer {
  /*padding: 1em 0;*/
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}
header h1 {
  line-height: 2em;
  font-size: 2em;
}
nav {
  float: left;
  max-width: 160px;
  margin: 0;
  padding: 1em;
  margin-top: 6em;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul a {
  text-decoration: none;
}
article {
  margin-left: 170px;
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
  margin-top: 6em;
}

Answer 2

Here is the solution you were looking for:

header {
/* The rest of the code remains unchanged */
position: relative;
}
header,footer {
/* The rest of the code remains unchanged */
padding: 1em 0;
}

You have specified that the div width should be 100%, with the header width being set to 100% of its parent, and then applied padding left and right of 1em (padding: 1em -> pads all four sides, padding: 1em 0 -> top & bottom 1em, left & right 0).
Why did you set it as fixed? Are you intending for the header to stick to the top?

div.container {
  width: 100%;
  border: 1px solid gray;
}
header{
  position:fixed;
  width:100%;
}
header, footer {
  /*padding: 1em 0;*/
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}
header h1 {
  line-height: 2em;
  font-size: 2em;
}
nav {
  float: left;
  max-width: 160px;
  margin: 0;
  padding: 1em;
  margin-top: 6em;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul a {
  text-decoration: none;
}
article {
  margin-left: 170px;
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
  margin-top: 6em;
}

Answer 3

Answer №2

To make the article full window size, simply add this code to your .article class:

height: 100vh;

Answer 4

To make the article full window size, simply add this code to your .article class:

height: 100vh;

Answer 5

Answer №3

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/jquery.js"></script>
<script src="http://example.com/script.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Title of the Page</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>This is a sample text for demonstration purposes.</p>

    <p>Clicking on the screen will trigger certain effects depending on the layout and features enabled in the page.</p>

    <p>Some more text to showcase scrolling functionality..</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h1>Footer Content</h1>
  </div>
</div>

</body>
</html>

Answer 6

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/jquery.js"></script>
<script src="http://example.com/script.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Title of the Page</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>This is a sample text for demonstration purposes.</p>

    <p>Clicking on the screen will trigger certain effects depending on the layout and features enabled in the page.</p>

    <p>Some more text to showcase scrolling functionality..</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h1>Footer Content</h1>
  </div>
</div>

</body>
</html>

Answer 7

Answer №4

To provide space for a fixed header, add a margin-top (e.g. 100px) to the first non-fixed element in the content. Additionally, include html, body {margin: 0; } to reset default margins that impact the width of non-fixed content.

Ensure all elements have box-sizing: border-box; applied to include borders in percentage widths (see snippet).

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    body,
    html {
      margin: 0;
    }
    div.container {
      width: 100%;
      border: 1px solid gray;
    }
    header {
      position: fixed;
      width: 100%;
      right: 0px;
    }
    header,
    footer {
      padding: 1em;
      color: white;
      background-color: black;
      clear: left;
      text-align: center;
    }
    nav {
      float: left;
      max-width: 160px;
      margin: 0;
      padding: 1em;
      margin-top: 100px;
    }
    nav ul {
      list-style-type: none;
      padding: 0;
    }
    nav ul a {
      text-decoration: none;
    }
    article {
      margin-left: 170px;
      border-left: 1px solid gray;
      padding: 1em;
      overflow: hidden;
      margin-top: 100px;
    }
  </style>
</head>

<body>

  <div class="container">

    <header>
      <h1>City Gallery</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">London</a>
        </li>
        <li><a href="#">Paris</a>
        </li>
        <li><a href="#">Tokyo</a>
        </li>
      </ul>
    </nav>

    <article>
      <h1>London</h1>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
    </article>

    <footer>Copyright © W3Schools.com</footer>

  </div>

</body>

</html>

Answer 8

To provide space for a fixed header, add a margin-top (e.g. 100px) to the first non-fixed element in the content. Additionally, include html, body {margin: 0; } to reset default margins that impact the width of non-fixed content.

Ensure all elements have box-sizing: border-box; applied to include borders in percentage widths (see snippet).

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    body,
    html {
      margin: 0;
    }
    div.container {
      width: 100%;
      border: 1px solid gray;
    }
    header {
      position: fixed;
      width: 100%;
      right: 0px;
    }
    header,
    footer {
      padding: 1em;
      color: white;
      background-color: black;
      clear: left;
      text-align: center;
    }
    nav {
      float: left;
      max-width: 160px;
      margin: 0;
      padding: 1em;
      margin-top: 100px;
    }
    nav ul {
      list-style-type: none;
      padding: 0;
    }
    nav ul a {
      text-decoration: none;
    }
    article {
      margin-left: 170px;
      border-left: 1px solid gray;
      padding: 1em;
      overflow: hidden;
      margin-top: 100px;
    }
  </style>
</head>

<body>

  <div class="container">

    <header>
      <h1>City Gallery</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">London</a>
        </li>
        <li><a href="#">Paris</a>
        </li>
        <li><a href="#">Tokyo</a>
        </li>
      </ul>
    </nav>

    <article>
      <h1>London</h1>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
    </article>

    <footer>Copyright © W3Schools.com</footer>

  </div>

</body>

</html>

Ensure that the fixed header's width matches the size of the container div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Flutter image blurs into a striking combination of red and black as the screen dimensions are altered

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

Text display appears uneven

Utilize Javascript or Jquery to intercept and handle both GET and POST requests

Exploring the integration of pre-defined Tailwind classes within Next JS development

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Issue with Intel XDK: the document.location.href is directing to an incorrect page

Struggling to modify CSS properties for :before and :after pseudo-elements?

Say goodbye to using 'jQuery .load()' with <img> elements inside <a> tags

What is the best way to transfer my saved bookmarks and import them into a database?

Creating the x and y coordinates for drawImage in HTML5

Tips for aligning controls in a column using Bootstrap

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

Attempting to align a CSS card flip within a Bootstrap layout

Combining various postponed JavaScript file imports in the HTML header into a single group

Using Conditional Tags for CSS Display

What is the best way to exclude HTML tags from the innerHTML attribute?