Display (almost) evenly a series of thumbnails

Question

I would like to display a series of thumbnails in a gallery and would like them to be displayed evenly in their container while fitting exactly the width of that container.

I found a very good solution here (the one from Marcelo Amorim, not the popular one):

Distributing images evenly & horizontally in a Div via CSS

This is basically the solution he came up with:

#container {
    text-align: justify;
}
.pic_bloc {
    width: 130px; 
    height:160px;
    display: inline-block;
    vertical-align: top;
    margin-bottom:30px;
}

.pic_bloc img{
    width:130px;
    height:160px;
}

#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

This is my HTML:

<div id="container">              
    <div class="pic_bloc"><img src="1.jpg"/></div>
    <div class="pic_bloc"><img src="2.jpg"/></div>
    <div class="pic_bloc"><img src="3.jpg"/></div>
    <div class="pic_bloc"><img src="4.jpg"/></div>
    <div class="pic_bloc"><img src="5.jpg"/></div>
    <div class="pic_bloc"><img src="6.jpg"/></div>
    <div class="pic_bloc"><img src="7.jpg"/></div>
</div>

The problem is that it is too effective.

For instance, if I have two rows and 7 thumbnails, the first row will display evenly 5 thumbnails and the second row will display two thumbnails dispatched at the extreme positions, leaving the middle of that row completely empty.

Here is the result:

This is not what one intuitively expects from a standard gallery or list. So is there any way to get the same behavior but with the last row's thumbnails aligned to the left like this?

This would make a lot more sense for a gallery.

As the script uses a justified aligning, I suspect that it would require a complete different approach but I didn't find a clean solution by myself or online.

PS: jQuery or CSS, anything that works would do.

Thank you.

http://jsfiddle.net/uG2U4/

Answer 1

Updated answer with table layout

I haven't come up with anything better than using table structure and positioning your images accordingly.

Edit - > This example doesn't work with IE8 as the latter has no support of :last-child pseudo-class.

You can add support for IE8 using Javascript ->

Javascript

table_ = document.getElementById('tbl');
tr_ = table_.getElementsByTagName('tr');

for(var i=0;i<tr_.length;i++){

    tr_[i].lastChild.style.width = '1px';
    wrapperDiv = tr_[i].lastChild.getElementsByTagName('div')[0];
    wrapperDiv.style.position = 'relative';
    wrapperDiv.style.left = '1px';

    }

UPDATE

---

HTML

<table class='table' id='tbl' cellpadding='0' cellspacing='0'>
    <tr>

        <td><div class='parentWrapper'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper rightDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>

    </tr>  

    <tr>
       <td><div class='parentWrapper'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td></td>
             <td></td>
             <td></td>
        <td></td>
    </tr>  

</table>

CSS

.table{
    width:100%;
    height:auto;
    border:1px solid;    
}

.table td {
    width:auto;
    height:170px;
    vertical-align:top
}

.table td:last-child{
    width:1px;  
}

.table td:last-child div{
    position:relative;
    left:1px;  
}

.parentWrapper{
    width:50px;
    height:160px;
    border:1px solid brown;  
}

.table img {
    width:50px;
    height:160px;
    border:0px solid red;   
}

If you don't understand something, let me know.

Answer 2

Got it to work with some jQuery!

    <script>

    $(document).ready(function() 
    {
         var containerWidth       = $('.container').width();
         var thumbWidth           = $('.pic_block').width();
         var thumbsPerLine        = Math.floor(containerWidth/thumbWidth);
         var marginTotalWidth     = (containerWidth-(thumbsPerLine*thumbWidth));
         var tempMarginR          = Math.floor(marginTotalWidth/(thumbsPerLine-1));
         var extraTotalSpaceWidth = ((marginTotalWidth/(thumbsPerLine-1)) - tempMarginR) *thumbsPerLine;
         var i                    = Math.floor(extraTotalSpaceWidth); 
         var n                    = 1;           

         $('.pic_block').css('margin-right',tempMarginR);

         while( n <= thumbsPerLine) 
         {      
             if(n == thumbsPerLine)
             {
                 $('.pic_block:nth-child('+n+'n)').css('margin-right',0); 
             }
             else
             {
                 if(i>0)
                 {
                     $('.pic_block:nth-child('+thumbsPerLine+'n+1)').css('margin-right','+=1');  
                     i--;
                 };
             };
             n++; 
         }       
      });

  </script>

Resize the window and watch the display of the thumbnails.

http://jsfiddle.net/Baylock/ZkCgv/7/

Thank you for your help.