title: Fitting as many divs as possible horizontally in HTML, and filling the line width
body: <p>I have a bunch of fixed-width <code>div</code> elements styled to flow inline using <code>inline-block</code> display type. This leaves an empty space at the end of the line (where the next <code>div</code> could not be fitted and wrapped to the next line).</p>
  
  <p>What I'd like to do, is to expand all of the divs on the row evenly to fill up the row, <strong>similar to the "Justify" alignment for the text</strong>.</p>
  
  <p>In other words, I want to have a minimum width on <code>div</code> elements and fit as many of them as possible in a single row, and fill the entire row.</p>
  
  <p>Here's my sample HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #container { margin: 100px; padding: 10px; border: 1px solid blue; }
          .item { margin: 10px; width: 300px; min-width: 300px; display: inline-block; border: 1px solid red; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div class="item"&gt;Item One&lt;/div&gt;
          &lt;div class="item"&gt;Item Two&lt;/div&gt;
          &lt;div class="item"&gt;Item Three&lt;/div&gt;
          &lt;div class="item"&gt;Item Four&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is that possible with pure CSS + HTML? Or do I have to write a script to achieve this result?</p>
  
  <hr>
  
  <p>UPDATE: Since people keep suggesting to use percentage widths to fit items in a single row, I have to note that it's NOT the intention of this question. I want to have something like "Justified" text, but with blocks. Number of items are variable, and can be too many. </p>
  
  <p>The blocks need to be the same size, have a default (minimum) width that will cause them to wrap to next line if needed, and the container's width is needed to be filled with child items by extending their width.</p>
  
  <hr>
  
  <p>UPDATE 2:</p>
  
  <p>Current sample produces something like this:</p>
  
  <pre><code>|--------------------------- Container -----------------------------|
  | |------ 1 ------| |------ 2 ------| |------ 3 ------|             |
  | |------ 4 ------| |------ 5 ------| |------ 6 ------|             |
  | |------ 7 ------|                                                 |
  </code></pre>
  
  <p>I'm looking to see something like this:</p>
  
  <pre><code>|---------------------------- Container ----------------------------|
  | |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
  | |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
  | |-------- 7 --------|                                             |
  </code></pre>
  
  <p>Or this:</p>
  
  <pre><code>|---------------------------- Container ----------------------------|
  | |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
  | |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
  | |------------------------------ 7 ------------------------------| |
  </code></pre>
  
  <p>Each item has a minimum size, so in the above example item #4 and #7 won't fit the remaining space on the line and would wrap to the next line. I want the ones already fitted to the line to fill up the space.</p>
  
  <p>Note that the container may re-size because the browser can be re-sized. So, if it becomes smaller to the extent that only two items fit in a row, I'd want to see something like this:</p>
  
  <pre><code>|----------------- Container -----------------|
  | |-------- 1 --------| |-------- 2 --------| |
  | |-------- 3 --------| |-------- 4 --------| |
  | |-------- 5 --------| |-------- 6 --------| |
  | |------------------- 7 -------------------| |
  </code></pre>
  
  <p>I hope this clears the intent of the question.</p>