title: Prevent Div from moving
body: <p>I am working with a website with css drop down menus within the header div. When the drop down menu appears it resizes the header div therefore shoving down the content div.</p>
  
  <p>In the body of my index.php:</p>
  
  <pre><code>&lt;div class="top"&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
  &lt;?php include_once("header.php"); ?&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The header.php</p>
  
  <pre><code>&lt;div class="header"&gt;
  &lt;div style="display: table-cell; width: 250px; text-align: center;"&gt;
  LOGO
  &lt;/div&gt;
  &lt;div style="display: table-cell;"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 6&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 7&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="#"&gt;Link 3&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monkey 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And main.css</p>
  
  <pre><code>ul{
      padding: 0;
      list-style: none;
  }
  ul li{
      float: left;
      width: 100px;
      text-align: center;
  }
  ul li a{
      display: block;
      padding: 5px 10px;
      color: #333;
      background: #f2f2f2;
      text-decoration: none;
  }
  ul li a:hover{
      color: #fff;
      background: #939393;
  }
  ul li ul{
      display: none;
  }
  ul li:hover ul{
      display: block; /* display the dropdown */
  }
  .top{
      background: #1b2d3c;
      width: 100%;
      height: 40px;
  }
  .container{
      width: 1100px;
      height: 1000px;
  }
  .header{
      display: table-row;
      width: 1100px;
      height: 130px;
  }
  .content{
      position: absolute;
      background: #fff;
      width: 1100px;
      height: 500px;
  }
  * {
      background: #87a0b4;
      margin: 0px;
      padding: 0px;
      margin-left: auto ;
      margin-right: auto ;
  }
  </code></pre>
  
  <p>I apologize for the lengthy post. How can I prevent the problem I am having? I want to be sure I am doing things correctly before I get too deep into the project.</p>