title: How can i Display div Elements in one row
body: <p>Hi everyone i want o display 3 elements in a row. I have tried the following code but it is not displaying them correctly.</p>
  
  <pre><code>    &lt;div id="mainDiv" style="background-color:#f77f00; width:90%; margin-right:5%; margin-left:5%; margin-bottom:1%; margin-top:1%;" &gt;
          &lt;div id="left" onclick="Deletefav(this)"  style="display: inline; width:20%; float:left; "&gt;'+
              '&lt;img style="display: inline;" src="" /&gt;
          &lt;/div&gt;'+
  
          &lt;div id="center" onclick=""  style=" width:30%;  display: inline;text-align: center; margin:10%;"&gt;
              &lt;p style="display: inline;"&gt;&lt;font color="#fff" face="verdana" size="4"&gt;testing&lt;/font&gt;&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="right" onclick="Callfav(this)"  style="display: inline; width:20%; float:right;"&gt;
              &lt;img style="display: inline;" src="" /&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>It is displaying like this </p>
  
  <p><img src="https://i.stack.imgur.com/c4to7.jpg" alt="Above code is displaying  this, i don&#39;t know why text is according to images"></p>
  
  <p>I want to create it like the sample image<img src="https://i.stack.imgur.com/jkgNL.jpg" alt="Sample"></p>