title: positioning an image next to a menu bar with html/css
body: <p>I am very new to html and css.  I am trying to build my first website.  I would like to have a picture on the same line as a nav bar, with the picture to the left.  I first tried using some prewritten code for a drop down nav bar, but I was unable to position an image to the left of it.  I tried some very basic code, but I still cannot figure our how to put a div (my image) next to a nav.  I don't quite know when to use <code>position</code>  and when to use <code>float</code>.  My goal is simple to start.  Get a div and nav to sit side-by side.  Here is the html I am using to test:   </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;
          Nav and div
      &lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="styleside.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;img src="images/basil.jpg" alt="picture here" height="20%" width="20%"&gt;
  &lt;/div&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;Home&lt;/li&gt;
          &lt;li&gt;Big Friendly Button&lt;/li&gt;
          &lt;li&gt;TARDIS&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can Anyone point me to a starting place for how to move these elements around?  Thank you!</p>