title: Dilema with heading, nav, and floating
body: <p>I used another post (<a href="https://stackoverflow.com/questions/20942646/positioning-an-image-next-to-a-menu-bar-with-html-css">positioning an image next to a menu bar with html/css</a>), and it worked well, but now my heading is acting really weird!  If you look at the result of the example code in full screen, you'll see some of it is stuck next to my menu bar. May someone please help me?  I want my heading to be BELOW my menu bar.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: sans-serif;
  }
  h1 {
      font-family: comic sans ms;
      float: top;
  }
  nav ul {
      list-style-type: none;
      background-color: blue;
      border: 4px solid orange;
      border-radius: 500px;
      font-family: sans-serif;
      font-weight: bold;
      padding: 16px;
  }
  nav ul li {
      display: inline;
      border-right: 2px solid orange;
      padding-right: 8px;
      padding-left: 8px;
  }
  nav ul li:last-child {
      border-right: none;
  }
  nav ul li a {
      text-decoration: none;
      color: orange;
  }
  nav {
      display: inline;
  }
  div {
      float: left;
  }
  nav {
      float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Example&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/example.css"/&gt;
      &lt;div&gt;
          &lt;img src="images/example.jpg"&gt;
      &lt;/div&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="example.html"&gt;Example&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="random.html"&gt;Random&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="blah-blah.html"&gt;Blah Blah&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="other.html"&gt;Other&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="something-else.html"&gt;Something Else&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="more.html"&gt;More&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Example Example Example Example Example Example Example&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>