css Question posted in
Some basic documentation can be found here.

Css – Why Doesn't My Header Div Stay Centered When I Scroll The Image?

I am trying to center my header div. It works most of the time. However, once I make the screen window width smaller than the image and scroll the the right side of the image, the header div begins to veer off to the left. I cannot seem to fix this problem.

This is the code that I currently have and I have tried everything I could think of to center it when I scroll the image, but I just cannot.

To see what my problem is, go into full screen snippet mode and then make your window small enough, so that you have to scroll for to see rest of gray div (it replaces the image in my issue). And once you scroll enough the to the right, the header moves to the left.

```
.text{
text-align:center;
}


#header {
position: sticky;
left: 50%;
width: 200px;
height: 160px;
transform: translateX(-50%);
  }


#div{
position: relative;
margin: auto;
height: 675px;
width: 1350px;
border: 5px solid black;
background:gray;
}
```
```
<div id="header">
    <h1 class="text">Title</h1>
    <h3 class="text">SubTitle</h3>
    <h2 class="text">SubTitle</h2>
</div>

<div id="div">
</div>
```

I was trying to create a runnable snippet, but I guess that feature was removed or somethin’. So, I need help with that too now.

Tags:

2

Answers


  1. 0

    The body tag renders as a block by default (https://html.spec.whatwg.org/multipage/rendering.html#the-page) so it’s establishing a width based on its container (the window) and the grey div is overflowing out of it. Your sticky header is behaving normally within the body tag’s width.

    I guess you could set the body to display:inline-block to force it to expand to contain the grey div, but I personally get nervous about mucking around with the body tags for how it might effect the layout of other elements on the page. Would it be possible for you to wrap your content in a container? If so, this is what I’d do:

    .text {
    text-align: center;
}

#container {
    display: inline-block;
}

#header {
    position: sticky;
    left: 50%;
    width: 200px;
    height: 160px;
    transform: translateX(-50%);
}

#div {
    position: relative;
    margin: auto;
    height: 675px;
    width: 1350px;
    border: 5px solid black;
    background: gray;
}

    and

    <div id="container">
    <div id="header">
        <h1 class="text">Title</h1>
        <h3 class="text">SubTitle</h3>
        <h2 class="text">SubTitle</h2>
    </div>
    <div id="div">
    </div>
</div>
    Login or Signup to reply.
  2. 0

    If you want header to center according to screen size then you need make parent div more flexible so that it uses 100% of available space of screen. You can achieve that with help of flexbox .

    Below is simple example, similar to your snippet.

    body{
  margin: 0;
  padding: 0;
}

#header{
  position: sticky;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#div{
  width: 100%;
  height: 100px;
  background-color: gray;
}
    <div id="header">
    <h1 class="text">Title</h1>
    <h3 class="text">SubTitle</h3>
    <h2 class="text">SubTitle</h2>
</div>

<div id="div">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search