title: Make mulitple divs line up next to each other inside parent div
body: <p>I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that <strong>I am using twitter bootstrap</strong>. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:</p>
  
  <p>HTML: </p>
  
  <pre><code> &lt;div class="row-fluid"&gt;
      &lt;div class="span8 offset2 articleContent"&gt;
          &lt;!-- These are the divs to span across, when it works there would be more than two --&gt;
          &lt;div class="gridPics"&gt;&lt;/div&gt;
          &lt;div class="gridPics"&gt;&lt;/div&gt;
          &lt;!-- They will also go over this image --&gt;
          &lt;img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about"&gt;
      &lt;/div&gt;
      &lt;div class="span2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .gridPics{
     position: absolute;
     z-index: 1;
     width: 10%;
     height: 20%;
     background: #0000b3;
     bottom: 0;
     float: left;
   }
  
  
   .articleContent{
     position: relative;
     box-shadow: 0 0 5px 5px #888;
    }
  
   #sidePic{
     position: relative;
     z-index: -1;
   }
  </code></pre>
  
  <p>Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:</p>
  
  <p>/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]<img src="https://i.stack.imgur.com/X3LxJ.png" alt="Where I am trying to achieve this"></p>