title: Why minimizing the window causing the HTML elements to disappear from the parent container itself?
body: <p>I have the following HTML code with me. I have duly tried to centrally align the parent container div <code>#header</code> and the childs within it <code>#header1</code> and <code>#header2</code> respectively. But when I try to minimize the window the parent container seems not to be centrally aligned and moreover the child headers seems to be collapsed even after setting the width explicitly to <code>width:50%;</code> of the parent container. Why is it so? Please explain and help me fix this. Also note the horizontal navigation bar below it also seems to be associated with the same bug I mentioned above.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
      *{
          margin:0px;
          padding:0px;
      }  
      &lt;!--Resetter rules for browsers--&gt;
      #bodyContainer {
      }
      body {
          border:black 2px solid;
          background-color : grey;
          padding:5px;
      }
      #header {
          margin:10px auto;
          background-color : red;
          width:70%;
          height:80px;    
          -webkit-border-radius:15px;
          -moz-border-radius:15px;
          border-radius:15px;
      }
      #header1 {  
          display:inline-block;
          width:50%;
          text-align:center;
          line-height:80px;           
      }
      #header2 {
          display:inline-block;
          width:50%;
          text-align:center;
          line-height:80px;
      }
      #navmenu {
          list-style-type:none;
          background-color:#444;
          border:black 2px solid;         
          text-align:center;
          margin-bottom:20px;
      }
      #content {
      }
      #nav {
      }
      #navmenu li {
          border:black 1px solid;
          background:yellow;
          border-radius:5px;
          height:30px;
          line-height:30px;
          width:33%;
          display:inline-block
      }
      #navmenu li a {
          text-decoration:none;           
          display:block;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="bodyContainer"&gt;
      &lt;div id="header"&gt;
          &lt;div id="header1"&gt;&lt;h1&gt;Welcome&lt;/h1&gt;&lt;/div&gt;&lt;div id="header2"&gt;&lt;h1&gt;You Get to choose better !! &lt;/h1&gt;&lt;/div&gt;           
      &lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;div id="contentHeader"&gt;
              &lt;p&gt;You Select ... We Serve &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="nav"&gt;
              &lt;ul id="navmenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Electronics&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Fashions&lt;/a&gt;&lt;/li&gt;                  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="sidebar"&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;p&gt;WebApp Version Numbered v1.0. All rights Reserved. &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>