title: Floating sidebar with CSS
body: <p>I set up a sidebar with a certain background color with a fixed position so that it would stay in place when you scrolled down the page. Everything seemed fine until now, and the only thing I modified was to taking away the list-style-type so that no bullets would appear in the side bar. I don't know, maybe I screwed something up along the way, but I just don't see where!!</p>
  
  <p>Right now, the links appear right next to the header, no background color, and they aren't in a fixed position.</p>
  
  <p>Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;!--main container,
  gives content area width and centers it horizontally--&gt; &lt;!--width of wrap will be subtracted from width of the browser window (its container)--&gt; #wrap {
    width: 750px;
    margin: 0 auto;
    background: #FFFFFF;
    position: relative;
  }
  h1 {
    margin: 0;
    background: #cc9
  }
  #nav {
    padding: 5px 10px;
    background: #FFF;
  }
  #main {
    float: left;
    width: 480px;
    padding: 10px;
    background: #FFF;
  }
  h2 {
    margin: 0 0 1em;
  }
  &lt;!--Setting position to fixed and margin-left will keep sidebar scrolling on page--&gt; #sidebar {
    float: right;
    width: 200px;
    padding: 40px;
    background: #99c;
    position: fixed;
    margin-left: 520px;
  }
  #footer {
    clear: both;
    padding: 5px 10px;
    background: #cc9;
  }
  #footer p {
    margin: 0;
  }
  #nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #nav li {
    display: inline;
    margin: 0;
    padding: 0;
  }
  #sidebar ul {
    list-style-type: none;
  }
  &lt;!--links--&gt; a:link {
    color: black
  }
  a:visited {
    color: blue
  }
  a:hover {
    font-weight: bold
  }
  a:active {
    font-style: italic
  }
  .topnavlink {
    clear: left;
    margin-left: 1em;
    font-size: 1.1em
  }
  .sidenavlink {
    font-size: 1em
  }
  .footer {
    clear: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;DIV id="sidebar"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="mailto:something@google.edu"&gt;Email Me&lt;/a&gt;
      &lt;/li&gt;
  &lt;/DIV&gt;
  &lt;/DIV&gt;
  
  &lt;DIV id="footer"&gt;
    &lt;P&gt;&amp;copy;Something 2012&lt;/P&gt;
  &lt;/DIV&gt;
  &lt;/DIV&gt;
  &lt;/BODY&gt;
  
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>