title: How to align 3 div's side by side in a footer Div(fixed position)
body: <p>This is feeling simple question but i'm struggling to get the exact output. I need to align 3 div's inside a div in footer. I have tried lot in google, and worked before too. but in footer fixed position its not working exactly. <img src="https://i.stack.imgur.com/cWOL3.png" alt="enter image description here"></p>
  
  <p>In that image, white color container div for footer, red- left, green -right, and center.</p>
  
  <p>here is my CSS :</p>
  
  <pre><code>div .footer-container
  {
      height:53px;
      width:100%;
      position:fixed;
  }
  
  div .footer-container div .footer-left
  {
      background-color:#f00;
      float:left;
      width:33%;
      height:31px;
  }
  
  div .footer-container div .footer-right
  {
      background-color:#0f0;
      float:right;
      width:33%;
      height:31px;
  }
  
  div .footer-container div .footer-center
  {
      background-color:#f0f;
      margin:0 auto;
      height:31px;
      width:33%;
  }
  </code></pre>
  
  <p>here is HTML :</p>
  
  <pre><code>&lt;div data-role = "footer" class="footer-container"&gt;
                  &lt;div&gt;
                  &lt;div class="footer-left"&gt;&lt;/div&gt;
                  &lt;div class="footer-right"&gt;&lt;/div&gt;
                  &lt;div class="footer-center"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>What am doing wrong ? pls explain.</p>