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>©Something 2012</P>
</DIV>
</DIV>
</BODY>
</HTML>
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