title: How to float a div inside unfloated div?
body: <p>I have a simple problem with divs. How can I float 3 DIVs inside one DIV that's not floated?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div style="margin:0 auto;width:1240px;border:1px solid #000000;"&gt;
      &lt;div style="width:200px;height:50px;float:left;border:1px solid #000000;"&gt;
          test    
      &lt;/div&gt;
      &lt;div style="width:200px;height:50px;float:left;border:1px solid #000000;"&gt;
          test    
      &lt;/div&gt;
      &lt;div style="width:200px;height:50px;float:left;border:1px solid #000000;"&gt;
          test    
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to float child DIVs inside this parent DIV or a way to center them without floating...display:inline-block won't work for the child divs as they are of different heights and one div is an image...so i think the best way is to float them and optimize the margins...In this case i want the parent div to be centered across the screen so i use margin:0 auto instead of float but this leads to the child div not stretching the parent div and it appears as a thin line.</p>
  
  <p>You can test the fiddle I created to understand the problem:
  <a href="http://jsfiddle.net/tQpM5/" rel="nofollow">http://jsfiddle.net/tQpM5/</a></p>
  
  <p>Thanks</p>