CODEWITHSUNDEEP
htmlcsssidebar
jackie
jackie

Reputation: 634

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>

Upvotes: 1

Views: 11014

Answers (3)

Dips
Dips

Reputation: 3280

You need closing tag for </UL> and you have extra closing div sitting at the bottom

<DIV id="sidebar">
            <ul>
                <li><a href="http://www.google.com">Google</a>
                </li>
                <li>
                <a href="mailto:[email protected]">Email Me</a>
                </li>
            </UL>
        </DIV>

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

And you are commenting wrong way it should look like this

/*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;
}

Upvotes: 2

s_p
s_p

Reputation: 4693

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

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You end your <ul> with </div> instead of </ul>. Correct that and everything should fall into place.

Upvotes: 0

Related Questions