Why does my div not take its parent div's width?

Question

I have a header div that I'd like to adopt the same width as its parent div, with the content centered. As of now, the div is shrunk to the width of its content, putting it off-center.

What did not work:

According to this thread, inheriting the width from the parent div should be the default behavior or can be reinforcable with width: auto, but this does not seem to take effect on my site.
Setting width: 100% makes the header too wide.
Changing to position: relative is not an option for me because then the header will no longer be sticky.
Hard-coding the width to a fixed width is not ideal because I want the page to be resizable.
Specifying a fixed max-width likewise makes the header shrink to its content width.
width: inherit doesn't have an effect, either.

Questions:
Why does the solution proposed in the other thread not apply in my case?
How to I make header have the same width as container?

body {
  max-width: 1200px;
  margin: auto;
}

nav {
  height: 100%;
  width: 250px;
  position: fixed;
  overflow-x: hidden;
  margin-top: 100px;
}


#container {
  margin-left: 250px;
}

#header {
  position: fixed;
  top: 0;
  height: 100px;
  background: white;
  border: 1px solid lightgray;
}

<!DOCTYPE html>
<html id="top">

<head>
  <link rel="stylesheet" href="style.css">
  </script>
</head>

<body>

  <nav id="nav">
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
    <li><a href="#sec3">Section 3</a></li>
  </nav>

  <div id="container">

    <div id="header">
      <h1><a href="#top">Title</a></h1>
    </div>

    <div id="content">
      <section id="sec1">
      <h2><a href="#sec1">Section 1</a></h2>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></section<
    </div>

  </div>

</body>

</html>

width:100%? you are using position:fixed so the width no more consider the container, it's a shrink-to-fit width — Temani Afif, Sep 15 '20 at 22:04
Because you made it `position: fixed`... Why is it position fixed? Can that be removed? — Dominik, Sep 15 '20 at 22:04
After your edit: You want a `position: fixed` element to take some specific width of an in-flow element... that is going to be hard and probably a better framing of your problem — Dominik, Sep 15 '20 at 22:07
@Temani Afif As said, this makes the header to wide, breaking out of the specified maximum width to the right. — Natalie Clarius, Sep 15 '20 at 22:07

dgo · Accepted Answer · 2020-09-18T17:04:31.463

There are a couple ways to achieve what you want. I do understand why you need it to be fixed with what I think you are trying to achieve. That is also what is causing the problem. Setting position "fixed" removes the element from the document flow.

Because you have already hard coded the left-nav width, adding the following to what you already have will work for you.

    #header {
        right:0;
        left:250px;
    }

If you want to line the fixed element up with the content, you will need to take a couple of things into account.

The body has a max-width of 1200px. That means, you have to take that into account when figuring this out, and it can get tricky.
The auto margin is something you can never know exactly without using another reference.
For screens smaller than 1200px, you need to add a media query. Anything under 100% will not work normally below 1200px with the calculation. Additionally, in order to align the right edges, you need to add a fixed margin to the #content and right offset the header the same amount. If you don't care about the right edges, you can just right offset the header however much you want.

    #content {
      /* ... other css you had */
      margin-right:15px;
    }
    #header {
         /* ... other css you had */
         text-align:center;
         left: 250px;
         right: 15px;
    }
    @media screen and (min-width:  1200px) {
        #content {
           margin-right:0;
        }
        #header {
          left: calc(((100% - 1200px ) /2) + 250px);
          right: calc((100% - 1200px) /2);
        }      
    }

So all that will work, but calc slows down rendering (some), and my sense is that this will be something that you end up having to change in the future. I recommend finding another way to achieve your goal. However, within the constraints you have given, the above will work.

Thanks for figuring out where the issue comes from. Unfortunately, this fix will set the header off 0/250px from the edge of the screen, rather than the body, so it does not line up with the content div: https://i.stack.imgur.com/pPkk6.png (The title, interestingly, does, but the grey border does not match.) — Natalie Clarius, Sep 17 '20 at 23:42

score 1 · Answer 2 · answered Sep 18 '20 at 21:29

Why does my div not take its parent div's width?

because your css don't allow it

Why does the solution proposed in the other thread not apply in my case?

since your div is fixed things are different

How to I make header have the same width as container?

just let it be the default.

There are properties in css like fixed, absolute, flex, grid ... that abandon their legacy behave odd and cannot follow the standards.

As to your page

people use mobiles to surf, many people has only cell phone to surf
nav{ width: 250px; position: fixed} or #header{ position: fixed; top: 0} makes the content unreachable for some devices
moving body aside may be misunderstood in some browsers - you don't need it, it's strange and unpredictable.
if you have a header don't make it poor div
if you apply to the full width header a border it will have full width, but the text won't...

as a snippet - different approach, good result

*{ box-sizing: border-box}
nav{ position: fixed; top: 0; left: 0; bottom: 0; padding: 15vh 10px; width: 25vw; text-align: center}
nav a{ text-decoration: none; color: inherit; outline: none; display: block; margin: 5vh auto; font-size: 1.5em}
main{ margin: 0 0 0 25vw; padding: 2vw}
header{ font-size: 5em}
section{ margin: 10vh 0}
h1{ text-align: center}

<nav>
<a href="#top">top</a>
<a href="#sec1">Section 1</a>
<a href="#sec2">Section 2</a>
<a href="#sec3">Section 3</a>
</nav>
<main>
<header id="top">Title</header>
<hr>
<section id="sec1"><h1>Section 1</h1>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.<br>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p></section>
<section id="sec2"><h1>Section 2</h1>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.<br>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p></section>
<section id="sec3"><h1>Section 3</h1>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.<br>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p></section>

Thanks for the detailled suggestions; this works. Will take up the `main` and `header` tags also. On small screens (I left that part out in my code snippet to keep it simple), I have the sidebar hidden by default and toggleable with a hamburger button that will appear in the header, which is part of the reason I want the header to be sticky. — Natalie Clarius, Sep 26 '20 at 16:51
As for the body, I just find it inconvenient for a website to take too much width (it makes continuous text tedious too read, visually pulls elements apart and makes for long curser travel distances), hence why I wanted a `max-width`, and centered with `margin: auto` because having it clinge to the left edge looked weird to me. Do you suggest applying the respective settings somehwere else than on `body`? — Natalie Clarius, Sep 26 '20 at 16:51

Johannes · Answer 3 · 2020-09-15T22:28:14.900

0

If your insist on having position: fixed for your #header, you should change the following:

#header {
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  text-align: center;
  height: 100px;
  background: white;
  border: 1px solid lightgray;
}

This will create a margin/distance to the left of the viewport of 250px (like the content, caused by left: 250px), make its width span to the far right (right: 0) and align the header text centered inside that (text-align: center;). That way its width is dynamic, depending on the viewport.

edited Sep 15 '20 at 22:28

answered Sep 15 '20 at 22:22

Johannes

64,305
18
73
130

Unfortunately, this fix will set the header off 0/250px from the edge of the screen, rather than the body, so it does not line up with the content div: https://i.stack.imgur.com/pPkk6.png – Natalie Clarius Sep 17 '20 at 23:45

Why does my div not take its parent div's width?

3 Answers3