CSS: Overlapping Unordered Vertical List

Question

Please check out the following fiddle .

 .sideNav { width: 25%; } .sideNav ul { list-style-type: none; margin: 0; padding: 0; width: 25%; height: 100%; position: fixed; overflow: auto; } .sideNav li a { display: block; color: black; text-align: center; text-decoration: none; } .sideNav li { font-family: "Comic Sans MS", cursive; text-align: center; float: left; } .right { width: 75%; } 

 <div class="content"> <div class="sideNav"> <ul> <li><a href="curriculum.html">Curriculum</a> </li> <li><a href="ersea.html">ERSEA</a> </li> <li><a href="family-services.html">Family Services</a> </li> <li><a href="mental-health.html">Mental Health</a> </li> <li><a href="nutrition.html">Nutrition</a> </li> <li><a href="health.html">Health</a> </li> <li><a href="policies.html">Policies &amp; Procedures</a> </li> <li><a href="ersea.html">ERSEA</a> </li> <li><a href="family-services.html">Family Services</a> </li> <li><a href="mental-health.html">Mental Health</a> </li> <li><a href="nutrition.html">Nutrition</a> </li> </ul> </div> <div class="right"> This is a test </div> </div> 

I am having an issue with my CSS unordered list links. The links are not appearing on their own, separate lines. For instance, Link1 (Curriculum) is running into Link2 (ERSEA), so-on and so-forth. Also, I created two <div> tags, setting one to 25% of the div and the other to 75% of div. However, they are interfering with one another, as you can see from my fiddle, the "This is a test" text appears behind my unordered list.

I need my side navigation bar to be fixed in one position and have all of the links on their own separate lines. In addition, I need to have the "This is a test" text appear in its own separate portion of the site; to the right of the side navigation bar.

Answer 1

You have a couple of issues:

1. you have set your li:s to float: left , this will cause them to merge together.

2. you have set the .sideNav to have position: fixed , this means that it will not be calculated into the "flow" of the rest of the items on the site and therefore sit on top of them.

Here's a little updated css to help you along a little...

 .sideNav { width: 25%; } .sideNav ul { list-style-type: none; margin: 0; padding: 0; width: 25%; height: 100%; position: fixed; overflow: auto; } .sideNav li a { display: block; color: black; text-align: center; text-decoration: none; } .sideNav li { font-family: "Comic Sans MS", cursive; text-align: center; display: block; } .right { padding-left: 25%; width: 75%; }