title: Why isn't my div content showing?
body: <p>I have a #info div element which shows some text strings like below:</p>
  
  <pre><code>&lt;body&gt;
      ...
  
     &lt;div id="info"&gt;
         ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I would like to CSS the #info div to position it at the <strong>bottom center</strong> of the page, so I did the following thing:</p>
  
  <pre><code>#info{
      width:100px; 
      margin:0px auto;
  }
  </code></pre>
  
  <p>With the above CSS, the #info div is on the bottom center of the page, <strong>BUT</strong> only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).</p>
  
  <p>I thought it maybe because of the <code>width:100px</code> is not enough to show all the texts, so I change to <code>width:200px</code>, but surprisingly after I increase the width, <strong>nothing was showing on the bottom center at all</strong>. Why? </p>
  
  <p><strong>-------------------- UPDATE ------------------</strong></p>
  
  <p>I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?</p>