title: Want vertical navigation bar. Float:left on nav and content, but still can't get them next to each other
body: <p>I would like a vertical navigation bar on the left on my main page. I've put both my side navigation and my main content in divs and floated them left, but I still can't get them side by side. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
       margin: 0;
       padding: 0;
       height: 100%;
      }
      #container{
       min-height: 100%;
       position: relative;
      }
      #header{
       background: #ff0;
       padding: 10px;
       width: 100%; /* This will make the Header 100% of the width of the container */
       height: 162px; /* This will stop the Header form stretching */
       background-image: url("../logo.jpg"); /* This will display the header and ensure its size it the current size of the page. */
       background-repeat: no-repeat;
      }
      #body{
       padding: 10px;
       padding-bottom: 80px; /* Height of the footer */
      }
      #footer{
       position: absolute;
       bottom: 0;
       width: 100%;
       height: 80px; /* Height of the footer */
       background: #6cf;
      }
  
      ul{
       font-size: x-large;
          list-style-type: none;
          margin: 0px;
          padding: 0px;
      }
  
      li{
   margin: 0 0 5px 0;
   background: #ccbadc;
      }
  
      #sid_nav, #main{
       width: 400px;
       height: 400px;
       float:left;
      #border:1px solid red;
         #margin-right:10px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;DIV id="container"&gt;
      &lt;DIV id="header"&gt;&lt;/DIV&gt; &lt;!--- Banner ---&gt;
  
      &lt;DIV id="body"&gt;
      &lt;DIV id="side_nav"&gt;
       &lt;nav&gt;
        &lt;ul&gt;
         &lt;li id="a"&gt;&lt;a href="#"&gt;Report an Incident&lt;/a&gt;&lt;/li&gt;
         &lt;li id="b"&gt;&lt;a href="#"&gt;Resolve an Incident&lt;/a&gt;&lt;/li&gt;
         &lt;li id="d"&gt;&lt;a href="#"&gt;Search Incidents&lt;/a&gt;&lt;/li&gt;
         &lt;li id="e"&gt;&lt;a href="#"&gt;Equipment Lookup&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/nav&gt;
       &lt;/DIV&gt;
  
       &lt;DIV id="main"&gt;
        &lt;p&gt;TESTING&lt;/p&gt;
       &lt;/DIV&gt;
      &lt;/DIV&gt; &lt;!--- ending of body div---&gt;
  
          &lt;DIV id="footer"&gt;
          &lt;br&gt;Internal #: 6037 or 6044&lt;/br&gt;
          &lt;/DIV&gt; &lt;!--- ending of footer div---&gt;
          &lt;/DIV&gt; &lt;!--- ending of container div---&gt;</code></pre>
  </div>
  </div>
  </p>