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:
I suggest using wookmark jquery plugin which is very suitable for your liquid design.