# Photo gallery layout

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

<div class="gallery">
<figure>
<img src="photo1.jpg" />
<figcaption>Photo 1</figcaption>
</figure>
<figure>
<img src="photo2.jpg" />
<figcaption>Photo 2</figcaption>
</figure>
...
</div>


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; &:before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -9999px; width: 9999px; z-index: -1; border-top: 1px solidborder_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.

• Why do you think negative margins is a hack? – cimmanon Jun 18 '14 at 13:34
• I can't say I have a rational reason for it; it's just the way I feel about it. – Maurice Perry Jun 18 '14 at 13:36
• Well they aren't: smashingmagazine.com/2009/07/27/… – cimmanon Jun 18 '14 at 13:41
• Will you also targeting mobile devices in the future? – darcher Jul 11 '14 at 22:54
• @darcher I am already – Maurice Perry Jul 20 '14 at 15:00

First, I will start with the good:

<figure>
<img src="photo1.jpg" />
<figcaption>Photo 1</figcaption>
</figure>


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:

<!doctype html>
<html>
<body>
<div class="gallery">
<figure>
<img src="photo1.jpg" />
<figcaption>Photo 1</figcaption>
</figure>
<figure>
<img src="photo2.jpg" />
<figcaption>Photo 2</figcaption>
</figure>
</div>
</body>
</html>


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.

• Thanks for your comment. I omitted the <html>, <head>, and <body> tags for brevity (and because you don't include them in jsfiddle). In my application html is, of course, generated dynamically. As you suggested, a JSON document is retrieved via ajax, and the <figure> tags are generated in JavaScript. The photos are not inlined in the application, I inlined them when I did the jsfiddle. – Maurice Perry Apr 18 '15 at 9:28