Adding
to one div, is moving other div

Question

I have two div elements inside a my body.

The first div is position:fixed, but when I add a paragraph to the second div, the first div moves down from the top of the page by ~20px.

How is adding a paragraph to one div, affecting the positioning of a previous div on the layout?

In the following code, there is one paragraph in the second div. This is the paragraph I am referring to.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>    
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">

    <div style=" 
            background-color:#717777; 
            height: 50px;
            width: 100%;
            position:fixed;
            padding: 30px;
            ">
        <h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
        <h2 style="color:#282828; margin: 0;" >This is a test website</h1>
    </div>

    <div>
        <p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
    </div>
</body>
</html>

score 1 · Answer 1 · answered Oct 08 '17 at 01:55

1

It's because p tags has a margin by default, so you just have to reset this margin using p {margin: 0;}. Here is the working example:

p {
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>    
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">

    <div style=" 
            background-color:#717777; 
            height: 50px;
            width: 100%;
            position:fixed;
            padding: 30px;
            ">
        <h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
        <h2 style="color:#282828; margin: 0;" >This is a test website</h1>
    </div>

    <div>
        <p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
    </div>
</body>
</html>

answered Oct 08 '17 at 01:55

P.S.

15,970
14
62
86

Could you please explain why it works like this, Suicide? Why does `
` need not only `top`, but also `bottom` margin set to `0` for the `fixed` element to stick to top? Why does setting a `position:inline-block` on that `
` also fix the problem?
– tao Oct 08 '17 at 02:36
@AndreiGheorghiu, all `p` elements have `margin-top` and `margin-bottom` by default, it doesn't matter, where in DOM this element is. And `position: inline-block` doesn't solve the issue. – P.S. Oct 08 '17 at 02:52
From my point of view you are providing an improper "fix", that is not always possible, without explaining the core of the problem (its cause). That's why I felt compelled to answer with a proper explanation of what's going on. On [so], the cause actually *matters* a lot. Because it's not only important for OP, but also for a lot of users who want to better understand how elements in a page work and why. – tao Oct 08 '17 at 02:59
@AndreiGheorghiu, I agree with you, but what's wrong with my explanation? – P.S. Oct 08 '17 at 03:01
It's not wrong, just incomplete. It doesn't explain **why**. Only **how**. If you read carefully the question, the OP is wondering how an element placed ***after*** the `fixed` one affects the fixed one. Any element placed after, should not, normally, affect elements before them, especially if those are `position:fixed`. Correct? I personally read that *"how"* as a *"why"*. – tao Oct 08 '17 at 03:04
@AndreiGheorghiu, yes, I wasn't very carefull, but you already gave detailed answer, there is no reason to duplicate your explanation I think. – P.S. Oct 08 '17 at 03:08
@AndreiGheorghiu, yes, if their position is `fixed` or `absolute` I think – P.S. Oct 08 '17 at 03:09
From my point of view the only purpose of this question is to point to the one it duplicates, better indexing it, thus allowing a good answer (the one in the duplicate question) to reach more people who want to learn. I'm assuming you're trying to improve the quality of your future answers and, if you learned you should always try to briefly explain why a solution works, not only provide it, this was a good day for both of us. Happy coding! – tao Oct 08 '17 at 03:14
1

@AndreiGheorghiu, I caught your thought, thank you and good luck! – P.S. Oct 08 '17 at 03:19

tao · Accepted Answer · 2017-10-08T03:22:55.423

It's because you're not positioning the element anywhere vertically, because you're not setting any of its top or bottom offsets, thus placing it where it would be positioned if it were part of the document flow. This means it will align itself with the first element in the document flow, according to its margin.

That first element in document flow happens to be <p>.

The proper fix for your problem is setting top:0; on the fixed element. For a more detailed explanation please read the accepted answer of the question yours duplicates.

Other possible (improper, IMHO) "fixes" are adjusting the first element in document flow to start from the top of the document, by overriding the default margins of <p> to 0, or setting it's display property to inline-block (or any other inline type of display).

Adding to one div, is moving other div

2 Answers2

Adding
to one div, is moving other div