title: HTML/CSS Center DIV inside DIV, absolute/relative problems
body: <p>I've been searching for hours now, but can't seem to figure it out. </p>
  
  <p>I want to center the Menu at the bottom of the Header Div, but it seems like it will either center it but keep it at the top or keep it at the bottom but not center it. </p>
  
  <p>It has something to do with the position:relative/absolute, I believe. </p>
  
  <p>This is the HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8" /&gt;
      &lt;title&gt;Transport2000&lt;/title&gt;
      &lt;meta http-equiv="Content-Language" content="en-us" /&gt;
  
      &lt;meta http-equiv="imagetoolbar" content="no" /&gt;
      &lt;meta name="MSSmartTagsPreventParsing" content="true" /&gt;
  
      &lt;meta name="description" content="Transport, mobilier, moloz etc." /&gt;
      &lt;meta name="keywords" content="transport, chican, marfa, duba, bucuresti, romania, transport bucuresti, " /&gt;
  
      &lt;meta name="author" content="Iulian" /&gt;
  
      &lt;style type="text/css" media="all"&gt;@import "css/master3.css";&lt;/style&gt;  
      &lt;style type="text/css" media="all"&gt;@import "css/master3.css";&lt;/style&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="header"&gt;
      &lt;!--&lt;h1&gt;&lt;img src="images/header/banner.png" alt="Transport2000" /&gt;&lt;/h1&gt;--&gt;
          &lt;div id="menu"&gt;
              &lt;dt id="acasa"&gt;
  &lt;a href="index.htm"&gt;Acasa&lt;/a&gt;&lt;/dt&gt;
              &lt;dt id="galerie"&gt;
  &lt;a href="galerie.htm"&gt;Galerie&lt;/a&gt;&lt;/dt&gt;
              &lt;dt id="contact"&gt;
  &lt;a href="contact.htm"&gt;Contact&lt;/a&gt;&lt;/dt&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="container"&gt;
  
  
      &lt;!--&lt;div id="menu"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Acasa&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Galerie&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
  &lt;/ul&gt;
      &lt;/div&gt;--&gt;
  
  
      &lt;div id="content"&gt;
          &lt;div class="padding"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur 
          adipiscing elit. Curabitur ultricies 
          scelerisque erat eu mattis. Duis lacinia, 
          ante non adipiscing euismod, dui lorem 
          adipiscing turpis, et convallis leo orci 
          ac ligula. Proin porta risus id tortor aliquet 
          sollicitudin. Sed suscipit blandit nisi, ac 
          laoreet nulla ultrices sed. Curabitur velit 
          enim, eleifend nec faucibus vitae, imperdiet 
          eget lectus. Suspendisse quis ligula urna. 
          Cum sociis natoque penatibus et magnis dis 
          parturient montes, nascetur ridiculus mus. 
          Quisque hendrerit nisl eu nibh facilisis in 
          rutrum elit tempor. Praesent vel nisi quis 
          justo sodales elementum.&lt;/p&gt;
          &lt;p&gt;Fusce felis dui, pharetra vel condimentum 
          sed, elementum non nisl. Maecenas condimentum 
          pretium augue, non rhoncus magna hendrerit at. 
          Vestibulum ante ipsum primis in faucibus orci 
          luctus et ultrices posuere cubilia Curae; Etiam 
          euismod laoreet sollicitudin. Lorem ipsum dolor 
          sit amet, consectetur adipiscing elit. Donec tempor 
          adipiscing nibh, a dignissim nunc rutrum in. Donec 
          ut nulla neque. Aenean mi sapien, pulvinar a 
          interdum in, fringilla pharetra turpis. Aliquam 
          aliquet volutpat imperdiet. Integer eu magna purus, 
          id mattis tortor. Suspendisse porttitor ligula 
          vitae erat pellentesque auctor. Vivamus non 
          interdum urna. Duis fermentum venenatis turpis, 
          at vestibulum mauris ultricies vel. Aliquam in 
          arcu in orci rutrum condimentum vel at ipsum. 
          Pellentesque scelerisque eleifend ipsum, at 
          scelerisque eros condimentum eu. Phasellus 
          ante metus, fermentum id lobortis id, rutrum 
          id magna.&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur 
          adipiscing elit. Curabitur ultricies 
          scelerisque erat eu mattis. Duis lacinia, 
          ante non adipiscing euismod, dui lorem 
          adipiscing turpis, et convallis leo orci 
          ac ligula. Proin porta risus id tortor aliquet 
          sollicitudin. Sed suscipit blandit nisi, ac 
          laoreet nulla ultrices sed. Curabitur velit 
          enim, eleifend nec faucibus vitae, imperdiet 
          eget lectus. Suspendisse quis ligula urna. 
          Cum sociis natoque penatibus et magnis dis 
          parturient montes, nascetur ridiculus mus. 
          Quisque hendrerit nisl eu nibh facilisis in 
          rutrum elit tempor. Praesent vel nisi quis 
          justo sodales elementum.&lt;/p&gt;
  
          &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;/div&gt;
      &lt;div id="footer"&gt;
  
          &lt;div id="copyright"&gt;
              Copyright &amp;#169; 2013 Blahzx Designs&lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is the CSS: </p>
  
  <pre><code>html, body {
      margin: 0px;
      padding: 0px;
  }
  
  body {
      font-family: Tahoma, Arial, Helvetica, Sans-serif;
      font-size: 15px;
      color: #ffffff;
      text-align: center;
      background-image:url('bg.png');
      background-color:#FFFFFF;
      background-repeat: repeat;
  }
  
  h1 {
      margin: 0;
      padding: 0;
      text-align: center;
  }
  
  #content h2 {
      margin: 0;
      padding: 0;
      padding-bottom: 15px;
  }
  
  #content p {
      margin: 0;
      padding: 0;
      padding-bottom: 15px;
  }
  
  #container {
      width: 960px;
      margin: auto;
      text-align: left;
  }
  
  #header {
      width: 100%;
      height:141px;
      position: relative;
      background-image:url('top.png');
      background-repeat: repeat-x;
  }
  
  #header-content { position: absolute; bottom: 0; }
  
  /* Menu */
  
  #menu {     height: 30px; 
      width: 639px; 
      margin-left: auto !important;  
      margin-right: auto !important;  
      text-align: center;  
      position: absolute;  
      bottom: 0; }
  
  #menu dl { margin: 0; padding: 0; }
  /* IE5 Mac Hack \*/ 
  #menu { padding-left: 0; } 
  /*/ 
  #menu { padding-left: 100px; overflow: visible; } 
  /* End Hack */
  
  #menu dt { float: left; }
  
  #menu dt a {
      display: block;
      height: 0px !important;
      height /**/:44px; /* IE 5/Win hack */ 
      padding: 30px 0 0 0;
      overflow: hidden;
      text-align: center;
      background-repeat: no-repeat;
  }
  
  #menu dt a:hover {
  
  }
  #menu dt#acasa,
  #menu dt#acasa a {width: 182px; background-image: url(../images/menu/acasa.png); }
  #menu dt#acasa a:hover {width: 182px; background-image: url(../images/menu/acasa_on.png); }
  
  #menu dt#galerie,
  #menu dt#galerie a { width: 221px; background-image: url(../images/menu/galerie.png); }
  #menu dt#galerie a:hover {width: 221px; background-image: url(../images/menu/galerie_on.png); }
  
  #menu dt#contact,
  #menu dt#contact a { width: 236px; background-image: url(../images/menu/contact.png); }
  #menu dt#contact a:hover {width: 236px; background-image: url(../images/menu/contact_on.png); }
  
  #content {
      width:960px;
      margin-right:280px;
      line-height:18px;
  }
  
  #content a {
      color: #FFFFFF;
      text-decoration: none;
  }
  
  #content a:hover {
      color: #CC00FF;
      text-decoration: none;
  }
  
  #content .padding {
      padding: 25px;
  }
  
  #footer {
      width:auto;
      height:137px;
      clear: both;
      font-family: Tahoma, Arial, Helvetica, Sans-serif;
      font-size: 10px;
      color: #c9c9c9;
      text-align: center;
      background-image:url('bot.png');
      background-repeat: repeat-x;
  }
  
  #footer a {
      color: #c9c9c9;
      text-decoration: none;
  }
  
  #footer a:hover {
      color: #ffd800;
  }
  
  #footer #altnav {
      clear: both;
      width: 350px;
      float: right;
      text-align: right;
      padding-top: 13px;
  }
  
  #footer #copyright {
      padding-top: 110px;
  }
  </code></pre>
  
  <p>Thank you!</p>
  
  <p>EDIT: I have added the WHOLE code.</p>