title: div layout as columns
body: <p>i have the following code:</p>
  
  <p>see in <a href="http://jsfiddle.net/bniya_dev/SYPNC/2/" rel="nofollow noreferrer">http://jsfiddle.net/bniya_dev/SYPNC/2/</a></p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="mainHeader"&gt;
          &lt;div id="details1"&gt;
              &lt;span&gt;details1&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="details2"&gt;
              &lt;span&gt;details2&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="header"&gt;
          &lt;span&gt;header &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>div#details1
  {
      float:left; width:100px;
  
  }
  div#details2
  {
   float:right;
  
  }
  </code></pre>
  
  <p>I want it to look like the following picture:
  <img src="https://i.stack.imgur.com/0f5iv.png" alt="enter image description here"></p>
  
  <p>What style I should set?</p>
  
  <p>I want it to work in all browsers even mobile browsers</p>
  
  <p><a href="http://jsfiddle.net/bniya_dev/SYPNC/2/" rel="nofollow noreferrer">http://jsfiddle.net/bniya_dev/SYPNC/2/</a></p>