Flexbox affected by margin afterwards

Multi tool use
Multi tool use












2















I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin of the title div somehow affected the positioning of the navigation bar.



I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br> after the navigation bar, it worked, but I think it is not elegant.



Is there a better method to achieve what I want?



Below is my simplified HTML code:



<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>

<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>


And the CSS style:



#navbar-bg {
position: fixed;
width: 100%;
}

#navbar {
display: flex;
align-items: center;
}

#body {
margin-top: 200px;
}


Since the position of #navbar-bg is fixed, I want the navigation bar as a whole to be fixed, and the margin-top of #body should not affect the navigation bar. Yet the margin-top moved both the #body and the navigation bar down, which is strange.



I want to fix this problem using an elegant solution, not adding a <br> after header.










share|improve this question



























    2















    I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin of the title div somehow affected the positioning of the navigation bar.



    I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br> after the navigation bar, it worked, but I think it is not elegant.



    Is there a better method to achieve what I want?



    Below is my simplified HTML code:



    <header id='navbar-bg'>
    <div id='navbar'>
    <ul>
    <li>Foo</li>
    <li>Bar</li>
    </ul>
    </div>
    </header>

    <div id='body'>
    <h1 id='search-title'>This is a title</h1>
    </div>


    And the CSS style:



    #navbar-bg {
    position: fixed;
    width: 100%;
    }

    #navbar {
    display: flex;
    align-items: center;
    }

    #body {
    margin-top: 200px;
    }


    Since the position of #navbar-bg is fixed, I want the navigation bar as a whole to be fixed, and the margin-top of #body should not affect the navigation bar. Yet the margin-top moved both the #body and the navigation bar down, which is strange.



    I want to fix this problem using an elegant solution, not adding a <br> after header.










    share|improve this question

























      2












      2








      2








      I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin of the title div somehow affected the positioning of the navigation bar.



      I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br> after the navigation bar, it worked, but I think it is not elegant.



      Is there a better method to achieve what I want?



      Below is my simplified HTML code:



      <header id='navbar-bg'>
      <div id='navbar'>
      <ul>
      <li>Foo</li>
      <li>Bar</li>
      </ul>
      </div>
      </header>

      <div id='body'>
      <h1 id='search-title'>This is a title</h1>
      </div>


      And the CSS style:



      #navbar-bg {
      position: fixed;
      width: 100%;
      }

      #navbar {
      display: flex;
      align-items: center;
      }

      #body {
      margin-top: 200px;
      }


      Since the position of #navbar-bg is fixed, I want the navigation bar as a whole to be fixed, and the margin-top of #body should not affect the navigation bar. Yet the margin-top moved both the #body and the navigation bar down, which is strange.



      I want to fix this problem using an elegant solution, not adding a <br> after header.










      share|improve this question














      I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin of the title div somehow affected the positioning of the navigation bar.



      I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br> after the navigation bar, it worked, but I think it is not elegant.



      Is there a better method to achieve what I want?



      Below is my simplified HTML code:



      <header id='navbar-bg'>
      <div id='navbar'>
      <ul>
      <li>Foo</li>
      <li>Bar</li>
      </ul>
      </div>
      </header>

      <div id='body'>
      <h1 id='search-title'>This is a title</h1>
      </div>


      And the CSS style:



      #navbar-bg {
      position: fixed;
      width: 100%;
      }

      #navbar {
      display: flex;
      align-items: center;
      }

      #body {
      margin-top: 200px;
      }


      Since the position of #navbar-bg is fixed, I want the navigation bar as a whole to be fixed, and the margin-top of #body should not affect the navigation bar. Yet the margin-top moved both the #body and the navigation bar down, which is strange.



      I want to fix this problem using an elegant solution, not adding a <br> after header.







      html css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 30 '18 at 12:36









      George YuGeorge Yu

      134




      134
























          2 Answers
          2






          active

          oldest

          votes


















          1














          You have to set a top: 0px to the #navbar-bg element. According to Mozilla:




          The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.




          So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.






          share|improve this answer































            0














            For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:



            #navbar-bg {
            position: fixed;
            width: 20%;
            float: left;
            }

            #navbar {
            display: flex;
            align-items: center;
            }

            #body {
            margin-top: 200px;
            float: right;
            width: 80%;
            }





            share|improve this answer























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977637%2fflexbox-affected-by-margin-afterwards%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              1














              You have to set a top: 0px to the #navbar-bg element. According to Mozilla:




              The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.




              So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.






              share|improve this answer




























                1














                You have to set a top: 0px to the #navbar-bg element. According to Mozilla:




                The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.




                So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.






                share|improve this answer


























                  1












                  1








                  1







                  You have to set a top: 0px to the #navbar-bg element. According to Mozilla:




                  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.




                  So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.






                  share|improve this answer













                  You have to set a top: 0px to the #navbar-bg element. According to Mozilla:




                  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.




                  So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Dec 30 '18 at 12:48









                  Mohammadreza GhorbaniMohammadreza Ghorbani

                  14827




                  14827

























                      0














                      For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:



                      #navbar-bg {
                      position: fixed;
                      width: 20%;
                      float: left;
                      }

                      #navbar {
                      display: flex;
                      align-items: center;
                      }

                      #body {
                      margin-top: 200px;
                      float: right;
                      width: 80%;
                      }





                      share|improve this answer




























                        0














                        For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:



                        #navbar-bg {
                        position: fixed;
                        width: 20%;
                        float: left;
                        }

                        #navbar {
                        display: flex;
                        align-items: center;
                        }

                        #body {
                        margin-top: 200px;
                        float: right;
                        width: 80%;
                        }





                        share|improve this answer


























                          0












                          0








                          0







                          For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:



                          #navbar-bg {
                          position: fixed;
                          width: 20%;
                          float: left;
                          }

                          #navbar {
                          display: flex;
                          align-items: center;
                          }

                          #body {
                          margin-top: 200px;
                          float: right;
                          width: 80%;
                          }





                          share|improve this answer













                          For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:



                          #navbar-bg {
                          position: fixed;
                          width: 20%;
                          float: left;
                          }

                          #navbar {
                          display: flex;
                          align-items: center;
                          }

                          #body {
                          margin-top: 200px;
                          float: right;
                          width: 80%;
                          }






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Dec 30 '18 at 12:57









                          David DeprostDavid Deprost

                          13217




                          13217






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977637%2fflexbox-affected-by-margin-afterwards%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Cxoej59w8,j83D
                              jQLNHAcA RDIw0ooW,Yjj8,PV41g7OZKb,vyMwVnp,LvfLAO,sj,jh,BSTU2,mXSgG nBq

                              Popular posts from this blog

                              Monofisismo

                              Angular Downloading a file using contenturl with Basic Authentication

                              Olmecas