title: Navigation bar and logo on same line?
body: <p>How do I get the navigation bar to appear next to the logo instead of breaking to the next line under it?
  I've tried several changes but it keeps going onto the next line.  I'm trying to avoid using floats because I was told they are not good to use.  I want it to look like the navigation bar on this website in this end:
  <a href="http://www.freecsstemplates.org/" rel="nofollow">http://www.freecsstemplates.org/</a></p>
  
  <p>I would like to understand how it is being done on that website.</p>
  
  <p>I am just very confused as to how the process is to work.</p>
  
  <p>CSS:</p>
  
  <pre><code>#header
  {
  background-image:url('menubg.png');
  background-repeat:repeat-x;
  }
  #logo
  {
  display:inline-block;
  }
  #menu ul
  {
  display:inline-block;
  list-style-type:none;
  padding: 0px;
  margin:0px;
  }
  
  #menu li
  {
  display:inline-block;
  margin:0px;
  padding:0px;
  }
  
  #menu a:link,a:visited
  {
  display:inline-block;
  text-transform:lowercase;
  width:auto;
  font-weight:bold;
  padding-left:47.5px;
  padding-right:47.5px;
  padding-top:9px;
  padding-bottom:9px;
  text-decoration:none;
  color:#57fafc;
  text-align:center;
  background-color:#62d2d3;
  }
  
  #menu a:hover,a:active
  {
  background-color:#7ce5e6;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="mainstyle.css"&gt;
  &lt;title&gt;Blah&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
  &lt;div id="logo"&gt;&lt;img src="logo.png" /&gt;&lt;/div&gt;
  &lt;div id="menu"&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;Contact&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;About&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;Design-a-Tee&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a 
  
  href="#"&gt;Reviews/Testimonials&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>