title: Overflow: hidden is not working with images
body: <p>I have this CSS code:</p>
  
  <pre><code>#portrait{
    height: 300px;
    width: 550px;
    border: solid;
    margin-right: auto;
    margin-left: auto;
    word-wrap:break-word;
    overflow:hidden;
  }
  .image{
    float:left;
    height: 30%;
    border:solid 1px;
    padding: 1px;
    posit ion:relative;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div id="portrait"&gt;
  &lt;img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/&gt;
  &lt;!--Can't pull all images in here because it thinks my question is spam--&gt;
  &lt;img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/&gt;
  &lt;img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/&gt;
  &lt;img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/&gt;
  &lt;img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/&gt; 
  &lt;img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is to make the image overflow in the x-axis hidden (instead of the first blonde woman being on the second row I want her to be cropped as necessary but yet remain on the first row and so on). When I do overflow-x hidden it won't work. Any thoughts on this one?</p>