title: unable to get the scroll when position:fixed -- elements disappears form the screen
body: <p>Top Bar (fixed) - As seen on twitter and facebook,tried to mimic the same on a web project that i'm working on -- no matter how much i try,the content disappears beyond scroll.Tried this tutorial <a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/" rel="nofollow">http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/</a> </p>
  
  <p>but,the contents in that overlaps when resolution is changed or when on zoom.Do not want that -- as we see on twitter/FB - want the scroll to come up on zoom (or lower resolutions)</p>
  
  <p>Been flocking around this issue since 2days with no positive outcome. </p>
  
  <p>Here is the test code that i've edited from the tutorial --</p>
  
  <pre><code>        &lt;html&gt;
          &lt;style type="text/css"&gt;
          #footpanel {
              position: fixed;
              top: 0; left: 0;
              z-index: 9999;
              background: #e3e2e2;
              border: 1px solid #c3c3c3;
              border-top: none;
              width: 100%;
              height: 25px;
              }
          #footpanel ul {
              padding: 0; margin: 0;
              float: left;
              width: 100%;
              list-style: none;
              border-bottom: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
              }
          #footpanel ul li{
              padding: 0; margin: 0;
              float: left;
              position: relative;
          }
          #footpanel ul li a{
              padding: 5px;
              float: left;
              height: 16px; width: 36px;
              text-decoration: none;
              color: black;
              position: relative;
          }
          #footpanel a.home{
              width: 50px;
              padding-left: 40px;
              border-right: 1px solid #bbb;
              text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
          }
          #footpanel a.chat{
              width: 126px;
              border-left: 1px solid #bbb;
              border-right: 1px solid #bbb;
              padding-left: 40px;
              text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
          }
          #footpanel li#chatpanel, #footpanel li#alertpanel { float: right; }  /*--Right align the chat and alert panels--*/
  
          &lt;/style&gt;
  
          &lt;div id="footpanel"&gt;
              &lt;ul id="mainpanel"&gt;
                  &lt;li&gt;&lt;a href="#" class="home"&gt;A &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="profile"&gt;B &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="editprofile"&gt;C &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="contacts"&gt;D &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="messages"&gt;E &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="playlist"&gt;P &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="videos"&gt;V &lt;/a&gt;&lt;/li&gt;
                  &lt;li id="alertpanel"&gt;&lt;a href="#" class="alerts"&gt;S&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="chatpanel"&gt;&lt;a href="#" class="chat"&gt;F (&lt;strong&gt;18&lt;/strong&gt;)&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;/html&gt;
  </code></pre>
  
  <p>What is happening -- on zoom(or lower resolution) the contents of the footpanel is coming out (i can prevent this with overflow:hidden , but that's not what i want) of the container(footpanel)</p>
  
  <p>What i want it to do -- like twitter/FB,i want a scroll to come in and the footpanel to save its layout and not fall out of place.</p>
  
  <p>Please help
  --CSS beginner</p>