title: Having trouble aligning my dropdown menu without pushing the div content down
body: <pre><code>&lt;div id="header"&gt;
  &lt;a href="#" id="logo"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;div id="nav_cont"&gt;
  &lt;ul id="nav"&gt;
      &lt;li id="main_btn"&gt;&lt;a class="mainlink" href="#"&gt;Parent 01&lt;/a&gt;&lt;/li&gt;
      &lt;li id="communities_btn"&gt;&lt;a class="mainlink" href="#" class="selected"&gt;Parent 02&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 01&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="selected"&gt;Item 02&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 03&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="occupancy_btn"&gt;&lt;a class="mainlink" href="#"&gt;Parent 03&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 04&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 05&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 06&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 07&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;         
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="resources_btn"&gt;&lt;a class="mainlink" href="#"&gt;Parent 04&lt;/a&gt;&lt;/li&gt;
      &lt;li id="about_btn"&gt;&lt;a class="mainlink" href="#"&gt;Parent 04&lt;/a&gt;&lt;/li&gt;
      &lt;li id="newsletter_btn"&gt;&lt;a class="mainlink" href="#"&gt;Parent 04&lt;/a&gt;&lt;/li&gt;
      &lt;li id="contact_btn"&gt;&lt;a class="mainlink" href="#"&gt;Parent 04&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  
  
  
  &lt;/div&gt;
  
  #header{
  border: 0px solid;
  width:1024px;
  margin: 0 auto;
  
  }
  #content{
  border: 1px solid;
  width:1024px;
  height:400px;
  margin: 0 auto;
  
  }
  
  #nav_cont{
  position: absolute;
  top:20px;
  border:1px solid;
  width:1024px;
  left:50%;
  margin-left:-512px;
  }
  </code></pre>
  
  <p>I'll try to explain the best I can. I have a header div tag that holds the logo. Next, I have the nav_cont that is a menu with hidden drop down menus. Lastly, the rest of the content is in the content div tags. </p>
  
  <p>I've aligned the menu to appear to the user that it is level and within by centering it using absolute, thus not pushing content down when the dropdowns appear.</p>
  
  <p>However when I shrink the browser the nav_cont continues to move off screen even though header and content have stopped. If I use relative or just margin: 0 auto; it minimizes fine, but again my problem is that it pushes the content down when the dropdowns are shown.</p>
  
  <p>I hope im making sense. Thanks.</p>