Search code examples
htmlcsssidebar

Floating sidebar with CSS


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!!

Right now, the links appear right next to the header, no background color, and they aren't in a fixed position.

Any ideas?

<!--main container,
gives content area width and centers it horizontally--> <!--width of wrap will be subtracted from width of the browser window (its container)--> #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;
}
<!--Setting position to fixed and margin-left will keep sidebar scrolling on page--> #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;
}
<!--links--> 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;
}
<DIV id="sidebar">
  <ul>
    <li><a href="http://www.google.com">Google</a>
    </li>
    <li>
      <a href="mailto:[email protected]">Email Me</a>
    </li>
</DIV>
</DIV>

<DIV id="footer">
  <P>&copy;Something 2012</P>
</DIV>
</DIV>
</BODY>

</HTML>


Solution

  • comments is CSS shoule be
    /* comment */

    NOT

    <!--comment-->


    also
    your html seems to have some extra closing </div>
    not sure if thats because its part of some more code