title: DIV inline-block + width 100%
body: <p>I can't display a few DIV's in one line. <code>display: inline-block</code> and <code>float: left</code> doesn't work. My site width is not <code>fixed</code> so I want it to be dynamic to fit any width of screen.</p>
  
  <hr>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div id="all"&gt;
      &lt;div id="a"&gt;25px&lt;/div&gt;
      &lt;div id="b"&gt;200px&lt;/div&gt;
      &lt;div id="c"&gt;
          &lt;div id="c1"&gt;100%&lt;/div&gt;
          &lt;div id="c2"&gt;100%&lt;/div&gt;
          &lt;div id="c3"&gt;100%&lt;/div&gt;
      &lt;/div&gt;
      500px
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>DIV {
      margin:5px;
      font-size:10px;
  }
  
  DIV#all {
      width:500px;
      border:1px dotted black;
  }
  
  DIV#a {
      display:inline-block;
      width:25px;
      height:200px;
      border:1px solid red;
      color:red;
  }
  
  DIV#b {
      display:inline-block;
      width:150px;    
      height:200px;
      border:1px solid green;
      color:green;
  }
  
  DIV#c {
      display:inline-block;
      width:auto;
      height:200px;
      border:1px solid blue;
      color:blue;
  }
  
  DIV#c1 {
      width:auto;
      border:1px dotted blue;
      color:blue;   
  }
  
  DIV#c2 {
      width:auto;
      border:1px dotted blue;    
  }
  
  DIV#c3 {
      width:auto;
      border:1px dotted blue;   
      color:blue;
  }​
  </code></pre>
  
  <p><strong>Live Demos:</strong></p>
  
  <ul>
  <li><p><strong>PROBLEM:</strong> <a href="http://jsfiddle.net/BC2d9/">http://jsfiddle.net/BC2d9/</a></p></li>
  <li><p><strong>RESOLVED:</strong> <a href="http://jsfiddle.net/RAds3/">http://jsfiddle.net/RAds3/</a> (<code>display:table</code>)</p></li>
  </ul>
  
  <p>​</p>