title: How to align Logo Image and Menu items in one line without using position absolute?
body: <p><strong>Background:</strong> The current design that I am working on, requires a logo followed by menu in one line. What I want is that the logo and the menu (which consist of two parts which are two unordered list here) to appear in one row or as one section.</p>
  
  <p><strong>Parts of the header:</strong> The header consist of Logo Image, menu left and menu right. The menu left and menu right are unordered list items in code. </p>
  
  <p><strong>Problem faced:</strong> I am trying to add the logo image and menus in one div element to bring them together in one line. But the image is appearing on top and followed by the menu element. I have tried using the display:inline to bring the logo image on one side and menu starting after the logo image but it didnot work.I am sharing my code. Can the image be positioned and aligned along with the menu items without using position absolute? There is only HTML5 and CSS3 in the code. There is no javascript in the code. </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>.header{
   position:relative;
   margin:0;
   padding:0;
  }
  
  
  .top{
   height:20%;
   border:1px solid #000;
  }
  
  .logo{
   height:100%;
   display:inline;
  }
  .element{
   clear:both;
   border:1px solid #000;
   float:left;
  }
  .leftc{
   display:inline;
  }
  .leftc li{
   list-style:none;
   display:inline-block;
  }
  
  .rightc{
   display:inline;
  }
  .rightc li{
   list-style:none;
   display:inline-block;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;header class="header"&gt;
     &lt;div class="top"&gt;
      &lt;div class="log"&gt;
       &lt;img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/&gt;
      &lt;/div&gt;
      &lt;div class="element"&gt;
       &lt;ul class="leftc"&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Buy&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Rent&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Sell&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Mortgages&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Agent finder&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;More&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
       &lt;ul class="rightc"&gt;
        &lt;li&gt;&lt;a href="#"&gt;List your rental&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Advertise&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Join&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    
    &lt;/header&gt;
   
   
   
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>