title: horizontal navigation bar done in CSS
body: <pre><code>* {
  border: 0px;
  margin: 0px;
  padding: 0px;
  }
  body {
  background-color: #FFC;
  }
  #wrapper {
  width:70%;
  margin: 0% auto;
  }
  
  #header {
  background-color: #C1D1FD;
  padding: 3%;
  }
  
  #nav {
  
  clear:both;
  padding: auto;
  position:inherit;
  background-color:#F0D5AA;
  width: auto;
  
  }
  #nav ul {
  list-style-type:none;
  
  }
  
  #nav a {
  display:block;
  float:left;
  padding:0%;
  width:20%;
  background-color:#F60;
  border-bottom:1px #fff solid;
  
  }
  
  #content {
  padding:7%;
  margin-left: 20%;
  background-color:#fff;
  
  }
  
  #footer {
  background-color: #C1D1FD;
  padding: 2%;
  text-align:center;
  }
  </code></pre>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;
          &lt;h1&gt;Welcome to our Website&lt;/h1&gt;
  
      &lt;div id="nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt; &lt;!-- end nav--&gt;
      &lt;/div&gt; &lt;!-- end header--&gt;
      &lt;div id="content"&gt;
          &lt;h2&gt;Page Heading&lt;/h2&gt;
          &lt;p&gt;welcome&lt;/p&gt;
          &lt;p&gt;welcome&lt;/p&gt;
          &lt;p&gt;welcome&lt;/p&gt;
      &lt;/div&gt; &lt;!-- end content--&gt;
      &lt;div id="footer"&gt;
          &lt;p&gt;Copyright 2010&lt;/p&gt;
      &lt;/div&gt; &lt;!-- end footer--&gt;
  &lt;/div&gt;&lt;!-- end wrapper--&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Hi this is my CSS &amp; HTML code, im trying to make my navigation bar below the header bar. but navbar result appears as zagged like stairs. How can i make my navbar buttons straight?
  Thank you for the advice,</p>