title: 100% width in three-column layers?
body: <p>Having this html:</p>
  
  <pre><code>&lt;div class="images_portfolio panel-widget-style"&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;a href="imagelink"&gt;&lt;img src="x.jpg" alt="" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this css:</p>
  
  <pre><code>.images_portfolio.panel-widget-style a img {
      width:100%;
      height:auto;
  }
  
  .images_portfolio.panel-widget-style a {
      position:relative;
      display:block;width:32%;margin-right:1%;
      float:left;
      margin-bottom:1%;
  }
  </code></pre>
  
  <p>it </p>
  
  <p>I can get 32%+32%+32% = 96%  + margin right (1%*3) = 99% in total of parent element.</p>
  
  <p>How can i get 100% of parent element so it works in all major browsers? Number of links can vary so I never know if it's 5 or 18 etc... (I want the the images to be aligned to an element down below that is 100%. Hope you understand what I mean).</p>