title: why margin left in this example is not working?
body: <p>I have created a simple example of 3 columns, here if one expands the other two will also expand.</p>
  
  <p>Below is the HTML code</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div id="inner"&gt;
          Hello world!
          Hello world!
          Hello world!
          Hello world!
          Hello world!
          Hello world!
          Hello world!
      &lt;/div&gt;
      &lt;div id="inner"&gt;
          Hello world!
      &lt;/div&gt;
      &lt;div id="inner"&gt;
          Hello world!
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code</p>
  
  <pre><code>#outer {
      width:500px; 
      background:#FFCCCC;
  }
  
  #inner {
      background:#FFCC33;
      padding:10px;
      width:100px;
      margin-left:25px;
      display:table-cell;
      border:1px solid #F00;
  }
  </code></pre>
  
  <p>JSFiddle <a href="http://jsfiddle.net/KCzq3/6/" rel="nofollow">http://jsfiddle.net/KCzq3/6/</a></p>
  
  <p>Update:</p>
  
  <p>see in the html if you increase the conent of one div the other two divs will show the same  height of the maximum high div, now if table-cell doesn't works, what can be the solution for this i cannot give float or inline block or it will shrink</p>