Photo gallery layout I'm working on a photo website, the markup looks like this:

&lt;div class="gallery"&gt;
    &lt;figure&gt;
        &lt;img src="photo1.jpg" /&gt;
        &lt;figcaption&gt;Photo 1&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
        &lt;img src="photo2.jpg" /&gt;
        &lt;figcaption&gt;Photo 2&lt;/figcaption&gt;
    &lt;/figure&gt;
    ...
&lt;/div&gt;


I've come up with some SCSS code that presents the images as expected (a justified strip of fixed height with a white line at the top and bottom. Here's the SCSS:

$background_color: #333;
$border_color: #EEE;

$thumbnail-height: 87px;

html, figure, img, div {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
    line-height: 1;
    margin: 1em;
    background: $background_color;
}
.gallery {
    text-align: justify;
    margin: 0 -4px -1px 0;
    padding: 1px 0 0 0;
    overflow: hidden;
    figure {
        position: relative;
        border-top: 1px solid $border_color;
        border-bottom: 1px solid $border_color;
        height: $thumbnail-height;
        display: inline-block;
        margin: -1px 4px 0 0;
        vertical-align: top;
        &amp;:before {
            content: "";
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -9999px;
            width: 9999px;
            z-index: -1;
            border-top: 1px solid $border_color;
            border-bottom: 1px solid $border_color;
        }
        img {
            height: 100%;
            display: block;
        }
        figcaption {
            display: none;
        }
    }
}


There is a fiddle demo here.

This gives an acceptable layout on most modern browsers, but I'm not very proud of this code:


It's too complicated
It uses negative margins, that I view as a hack
It uses large :before pseudo-element that are trimmed by overflow: hidden, and that also needs a negative z-index


I would be grateful for any tips that would help improve that code.
First, I will start with the good:

&lt;figure&gt;
    &lt;img src="photo1.jpg" /&gt;
    &lt;figcaption&gt;Photo 1&lt;/figcaption&gt;
&lt;/figure&gt;


It is excellent that you use the HTML5 tag figure instead of a plain old div.

You may just have removed this for brevity (many people do), but when you write HTML, you should build your page like this:

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Your Title Here&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="gallery"&gt;
        &lt;figure&gt;
            &lt;img src="photo1.jpg" /&gt;
            &lt;figcaption&gt;Photo 1&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
            &lt;img src="photo2.jpg" /&gt;
            &lt;figcaption&gt;Photo 2&lt;/figcaption&gt;
        &lt;/figure&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


You can validate your HTML at the W3C validator (it validates once you provide the framework).

It does look clumsy the way you write out each figure.  If I were you, I would probably load the images and figcaptions in a separate file (maybe a JSON file?) and use JS to add them to the page.  This way, you just have to enter the new data in this file, and the webpage will load them right in the next it is loaded.