title: How to align the div in header right ,left and center
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header-cont
  {
   width: 100%;
   position: fixed;
   top: 0px;
  }
  .header
  {
   height: 50px;
   background: #f0f0f0;
   border: 1px solid #ccc;
   width: 80%;
   margin: 0px auto;
   line-height: 0px;
  
  }
  .maindiv
  {
   box-shadow: 15px 0px 10px -11px rgba(0, 0, 0, 0.1), -15px 0px 10px -11px rgba(0, 0, 0, 0.1);
   width: 960px;
   background: #f0f0f0;
   border: 1px solid #ccc;
   height: 2000px;
   margin: 70px auto;
   
  }
  label {
      float: left;
      width: 15%;
      margin-top: .5%;
  
  }
  
  form ul {
      list-style-type: none;
      margin: 0;
  }
  
  form ul li {
      clear: both;
      margin-top:2%;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  &lt;!-- Star Here Top Title Bar --&gt;
  &lt;div class="header-cont"&gt;
  &lt;div class="header"&gt;
  &lt;form&gt;
      &lt;ul&gt;
        &lt;li&gt;
        &lt;div&gt;
  Here is the logo want to b in left corner
          &lt;label&gt;
            &lt;img src=""&gt; &lt;!-- Logo in left side corner--&gt; `enter code here`
          &lt;/label&gt;  
        &lt;div&gt;
        &lt;div &gt;
  Here is the profile picture i want to b it in center
          &lt;label&gt; 
            &lt;img src=""&gt;&lt;!-- Profile Picture in center --&gt;
          &lt;/label&gt;
         &lt;/div&gt;
  Here is user name wnt to be in right side
          &lt;label&gt;
            &lt;a href="" id="welcome"&gt;Welcome User!!&lt;/a&gt;&lt;!-- Right Side--&gt;
          &lt;/label&gt;
  Login and sign up want to b in Right corner
          &lt;label&gt;
            &lt;a href="#"&gt;Login&lt;/a&gt;&lt;!-- Right Side Corner--&gt;
            &lt;a href="#"&gt;Signup&lt;/a&gt;
          &lt;/label&gt;
        &lt;/li&gt;
      &lt;/ul&gt; 
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="maindiv"&gt;
  &lt;h1&gt;This is Content Page&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://i.stack.imgur.com/DgT5P.jpg" rel="nofollow">Thiz is output of the program, i want to change this header</a></p>