title: How to distribute several divs in a div evenly
body: <p>I have the following div before my footer and i want to have evenly distribute some more divs in it. currently i'm using manual margin percentage but I want to know is there a way to let CSS automatically distribute them with even space?</p>
  
  <p>CSS</p>
  
  <pre><code>#books {margin:10px auto;}          
  .bookimage {width:7%;
              padding-top:7%;
              display:inline-block;
              margin:2%;
              }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="books"&gt;
       &lt;div class="bookimage"&gt;  &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
       &lt;div class="bookimage"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>