title: display:inline resets height and width
body: <p>I have created example at <a href="http://jsfiddle.net/GKnkW/2/" rel="noreferrer">http://jsfiddle.net/GKnkW/2/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
   &lt;/head&gt;
  &lt;body&gt;
        &lt;div class="step"&gt;1&lt;/div&gt;&amp;nbsp;
        &lt;div class="step"&gt;2&lt;/div&gt;
        &lt;br/&gt;&lt;br/&gt;
        &lt;div class="step1"&gt;3&lt;/div&gt;&amp;nbsp;
        &lt;div class="step1"&gt;4&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.step
  {
      height:150px;
      width:150px;    
      background:yellow;
      display:inline;
  }
  
  .step1
  {
      height:150px;
      width:150px;    
      background:yellow;
  }
  </code></pre>
  
  <p>I want to display two divs side by side with their original height and width ( set in css )
  as soon as i add display:inline property to css it seems to loose height and width defined earlier. [ check divs with # 1 and #2 which seems to loose height and width setting ]</p>
  
  <p>can some one pin point an error which I seems to be doing or workaround for this weird behavior ?</p>