HTML/CSS - Issue justifying divs

Question

I'm coding a template for an image gallery. On its content pages, it presents a list of all albums or images side by side, divided by lines when the content reaches its width. I'm trying to get the content to appear justified, i.e. have the images spread out evenly through the page.

For this, I'm using this code:

#content_list{
    width:100%;
    text-align:justify;
}

For the parent div, and the following one for the divs inside it:

.item{
    width:164px;
    height:214px;
    display:inline-block;
}

In order to force the last line to justify regardless of the number of items, I'm using an empty div at the end with the following style:

.forceextra{
    width:100%;
    display:inline-block;
    height:1px;
}

Now, here's the problem I ran into: The template is being coded to work as per liquid design, ie. the amount of images per line and the space between them dynamically changes depending on the browser width, which has the added advantage of allowing the site to work as responsive without any extra work.

However, when there aren't enough images to fill up the last line (Which happens depending on the browser width), browsers make it so that one image appears to the left and another one to the right side of the last line, making it look bad. So I'm wondering, in order to fix this issue, is there a way to prevent this, that is, to make it so the images on the last line appear just as the ones before without having a set website width?

EDIT: Here's a fiddle showing the issue:

http://jsfiddle.net/jd4s3/

Answer 1

I suggest using wookmark jquery plugin which is very suitable for your liquid design.

Demo

Answer 2

Once you get more than four columns you ran into problems with this approach, i don't think this is the best way to do it, but up to some extent you are ok, after that you should use media queries, modifying the text-aling, to use left instead of justify, adding margin right to the items, and removing the same margin from the last items in your cols using :nth element. If it were me, based on what you did, i will use text-align: left from the start, with margins and then for each case i'll change the nth element margin removal, like this:

#content_list{
    width:100%;
    text-align:left;
}

.item{
    width:164px;
    height:214px;
    margin-right:5px;
    display:inline-block;
    background-color:#cc3355;
}

.forceextra{
    width:100%; display:inline-block; height:1px;
}

@media screen and (min-width: 543px){
    /*3 columns*/
    #content_list div:nth-child(3n){
        margin-right:0;
    } 
}

@media screen and (min-width: 693px){
    /*4 columns*/
    #content_list div:nth-child(4n){
        margin-right:0;
    } 
}

jsfiddle Demo

For every set of columns (depending on the screen width) you'll have to add a single media query for that, changing the nth-child argument.

Note: Be aware that i'm just pointing you out in the right direction, the exact amount of pixels needed for every query must be checkeb by you, so my example is not perfect.