title: Display to two divs inline side by side
body: <p>I am trying to stuck two divs side by side using <code>inline-block</code>. </p>
  
  <p>However for some reason it won't just work. With this I have two questions:</p>
  
  <ol>
  <li><p>How can I display inline block side by side the <code>&lt;nav&gt;</code> and the <code>&lt;article&gt;</code> container. The nav will be floated on left while the article will be floated on the right. Again how can I use <code>display: inline-block</code> with this. I don't need a <code>float</code>.</p></li>
  <li><p>How can I change list style of the ul li ul li and fix their position that are indented like this: <a href="http://prntscr.com/7koc47" rel="nofollow">http://prntscr.com/7koc47</a></p></li>
  </ol>
  
  <p>Here's my CSS:</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>/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
   display: block;
  }
  body {
   line-height: 1;
  }
  ol, ul {
   list-style: none;
  }
  blockquote, q {
   quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
   content: '';
   content: none;
  }
  table {
   border-collapse: collapse;
   border-spacing: 0;
  }
  
  
  /* General CSS */
  
  body{
   background-color: #eeeeee;
   font-family: "Times New Roman", Georgia, Serif;
   font-size: 17px;
  }
  
  #wrapper{
   width: 970px;
   margin: 0 auto;
  
  }
  
  
  header{
   background-color: #dddddd;
   padding: 15px;
   margin: 15px 0;
  }
  
  header h1{
   font-size: 40px;
   font-weight: bold;
  }
  
  nav{
   background-color: #dddddd;
  
  }
  
  nav{
   display: inline-block;
  }
  
  nav ul li{
   list-style: disc;
  }
  
  nav ul &gt; li{
   list-style: circle;
  }
  
  nav ul li a{
   text-decoration: none;
  }
  
  
  
  article{
   display: inline-block;
   background-color: #aaaaaa;
   margin: 20px 0;
  }
  
  
  article h2{
   font-size: 30px;
   font-weight: bold;
   margin: 20px 0;
  }
  
  
  article ul li{
   list-style: disc;
   margin: 15px 0;
  }
  
  article ul li a{
   font-weight: bold;
  
  }
  
  footer{
   background-color: #dddddd;
   margin: 15px 0;
  }
  
  .border{
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   border-radius: 25px;
   padding: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  
  &lt;header class="border"&gt;
  &lt;h1&gt;@ Loup's&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;nav id="links" class="border"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
          &lt;ul&gt; 
          &lt;li&gt;&lt;a href="#"&gt;articles/&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;beliefs respect and facts&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;classes suck&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;taboo oo&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;classes as syntatic sugar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;syntatic sugar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;better keyboards&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;ideal computer&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;assignment&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;language&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;dcvs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;is fp feasible&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;does oo sucks&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
      
  
          &lt;li&gt;&lt;a href="#"&gt;projects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;tutorials&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;contact me&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;  
  
  &lt;article class="border"&gt;
  &lt;h2&gt;My essays&lt;/h2&gt;
  &lt;p&gt;My last posts depend on each other, and should be read in sequence. Articles not in bold are optionnal.&lt;/p&gt;
  
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Assignment Statement Considered Harmfull&lt;/a&gt;. Pervasive mutable state mate programs more difficult to deal with. While this is old news, most programmers don't know or don't care. It's a pitty, because &lt;a href="#"&gt;simple remedies&lt;/a&gt; exist.&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Defining Syntatic Sugar&lt;/a&gt;. I sometimes hear arguments about what is or is not syntactic sugar. This is an attempt at defining it. &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Class-based Programming as Syntactic Sugar&lt;/a&gt;. Most of the time, "Object Oriented" actually mean classes. Classes are nothing more than syntactic sugar, at least in statically typed languages such as Java and C++. Sugar is not useless, but seeing past it helps us understand classes better.&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Taboo "OO"&lt;/a&gt;. The term "OO" is so overloaded that we should stop using it. Better substitutes are "classes" and "prototypes".&lt;/li&gt;
  
  
      &lt;li&gt;&lt;a href="#"&gt;How Class based Programming Sucks&lt;/a&gt;. Classes are vastly sub-optimal. Functional programming is far better.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/article&gt;
  
  
  &lt;footer class="border"&gt;
      &lt;p&gt;Contact, suggestions: Send me an email at &lt;a href="#"&gt;l@loup-valliant.fr&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;Built with &lt;a href="#"&gt;USSM&lt;/a&gt;&lt;/p&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Check my JSFIDDLE here: <a href="https://jsfiddle.net/yshckr8a/" rel="nofollow">https://jsfiddle.net/yshckr8a/</a></p>