title: CSS navigation absolute/fixed positioning issue?
body: <p>I've been teaching myself CSS, and decided to try and make a site with the knowledge I have thus far. So I decided to make a fixed navigation bar that follows the position of the web browser, and I ran into an issue. For whatever reason, one of the links I added isn't staying inside the nav bar when I change the browser window size. Can someone look at my code? Please ignore sloppiness, as I'm just trying this for the first time. </p>
  
  <p>Here's my HTML. The "secondnavlinks" div id is the one that won't stay within the nav bar:</p>
  
  <pre><code>&lt;div id="nav"&gt;
  
  &lt;div id="secondnavlinks"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Ambient Bookmarklet&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;div id="class1"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Saved&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Folders&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="header"&gt;
  &lt;img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" /&gt;
  &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS: </p>
  
  <pre><code>#nav {
  position: fixed;
  border: 1px solid #DDDDDD;
  top:-1px;
  left:109px;
  width:85%;
  height: 46px;
  background-color: white;
  z-index: !important 99;
  }
  </code></pre>
  
  <p>(Skipped over the "class1" div)</p>
  
  <pre><code>#secondnavlinks ul {
  position: absolute;
  display: inline;
  list-style-type: none;
  }
  
  
  
  #secondnavlinks ul li {
  display: inline;
  text-align: center;
  float: left;
  font-family: klavika-light;
  list-style-type: none;
  position: absolute;
  left: 950px;
  white-space: nowrap;
  }
  
  #secondnavlinks ul li &gt; a {
  text-decoration: none;
  color: inherit;
  }
  </code></pre>