title: Responsive div with images
body: <p>I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized.  I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please?
  This is the code example.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
     display: inline-block;
     position: relative;
     bottom:100%;
     width: 100%;
     margin: 5% 5% 0 0;
     font-size: 12px; 
  }
  .box:before{
     content: "";
     display: block;
     padding-top: 100%; 
  } 
  img {
     max-width:100%;
     height:auto;
     border:1px solid black;
     text-align:center;
  }
  .content{
     /* Positioning */
     position:  absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
  
     /* Styling */
     border:1px solid;
     padding: 30px;
     text-align: center;
     vertical-align: center;
     text-transform: uppercase;
     color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
     &lt;div class="content"&gt;
        &lt;img src="http://fantapr.altervista.org/paul.jpg" width="350px"&gt;
        &lt;img src="http://fantapr.altervista.org/paul.jpg" width="350px"&gt;
        &lt;img src="http://fantapr.altervista.org/paul.jpg" width="350px"&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>strong text</strong></p>