title: Place image and ul on same line
body: <p>I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;div class="ct-header-line"&gt;&lt;/div&gt;
      &lt;img class="logo" src="images/clinictechlogo.png"&gt;
      &lt;ul class="nav"&gt;
          &lt;!--common features, coded? or static?--&gt;
          &lt;li class="active"&gt;&lt;a href="#" id="homenav"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="apptenav"&gt;Appointments&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="presnav"&gt;Prescriptions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="prnav"&gt;Patient Records&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="billsnav"&gt;Bills&lt;/a&gt;&lt;/li&gt;
          &lt;!--special features, coded.....--&gt;
          &lt;li&gt;&lt;a href="#"&gt;Charts&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;something&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the some of the CSS for the header part:</p>
  
  <pre><code>.logo {
      padding: 20px 10px 10px 10px;
      display: inline;
  }
  
  .menu {
      background: #4F97BD url(images/headerbg.jpg) repeat;
  }
  
  .nav {
      list-style:none;
      margin:0;
  }
  
  .nav li {
      display: inline;
  }
  </code></pre>
  
  <p>The result is that the logo appears on one line, and the ul nav appears on the next...</p>