title: Margin collapse causing a Div to move.
body: <p>I am working on HTML and having an issue with what I think is margin collapse. When I take out the line "border:solid black 1px;" from the Div #body in my css, it causes the Div #header to drop about 20% on the page. I can't figure out WHY it is doing that, or how to fix it. I have tried making the body Div border 0px and it does the same thing. If I take the body Div out entirely, it does the same thing. </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Cast &amp; Crew - Home Page&lt;/title&gt;
  &lt;style type="text/css"&gt; 
  
  &lt;/style&gt;
  &lt;link href="css2.css" type="text/css"                        
                rel="stylesheet" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="body"&gt;
  &lt;div id ="header"&gt;
      &lt;span class="float"&gt;&lt;img class="img" src = "face2.png" alt="Face mask"&gt;&lt;/span&gt;
          Cast &amp; Crew Restaurant
  
      &lt;span class="floatr"&gt;&lt;img class="img" src = "face.png" alt="Face mask"&gt;&lt;/span&gt;
  
  
  &lt;table id="links"&gt;
  &lt;tr&gt;
      &lt;th&gt;&lt;a href="Home.html"&gt; Home&lt;/a&gt;&lt;/th&gt;
      &lt;th&gt;&lt;a href="Menu.html"&gt; Menu&lt;/a&gt;&lt;/th&gt;
      &lt;th&gt;&lt;a href="plabout.html"&gt;About Us&lt;/a&gt;&lt;/th&gt;
      &lt;th&gt;&lt;a href="Contact.html"&gt;Contact&lt;/a&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class ="sidebar"&gt;
  &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#app"&gt;Appetizers&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#salad"&gt;Salads&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#burger"&gt;Burgers&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#sand"&gt;Sandwiches&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#pasta"&gt;Pasta&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#entree"&gt;Entrées&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a href="#pizza"&gt;Pizza&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS code</p>
  
  <pre><code>a:link {color:#FFFFFF;}
  a:visited {color:#0066FF}
  a:hover {color:#3385FF;}
  a:focus {color:#B20000;}
  a:active {background-color: white; color:black;}
  
  .blankrow{height: 40px !important; 
      }
  
  #body   {height: 1150px; width: 100%;
      border:solid black 2px;}
  
  
  #header     {position: fixed;
      background:black;
      height: 160px;width: 100%;
      text-align: center;
          font-size:40pt;
          text-shadow:5px 4px 10px #FF0000,-5px -4px 10px #FFFFFF;
          color:#000000;
  
          }
  
  html        {background-image: url("bg.jpg");
          background-repeat:no-repeat;
          background-position; 50%, 50%;
          background-attachment: fixed;
          min-height:100%;
          background-size:cover;
          color:#FFFFFF;
          }
  
  .img    {width: 50px; height:85px;}
  
  #links  {width:50%; 
      height:50px;
      font-size:22pt;     
      margin:auto;
      text-shadow:0px 0px 0px #000000;
      }
  
  #menu   {height: 3200px;
      width: 900px;
  
      margin-top:15%;
      margin-left:17%;
      font-size:18pt;}
  
  .sidebar {width: 150px;
      height: 230px;
      position: fixed;
      left: 40px;
      top: 300px;
      font-size:18pt;
      border:solid black 2px;}
  
  .spacer{height: 10px !important; }
  </code></pre>