patternhtmlMinor

Photo gallery layout

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

gallerylayoutphoto

Problem

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

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 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.

Solution

First, I will start with the good:


    
    Photo 1

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:


    Your Title Here

    
        
            
            Photo 1
        
        
            
            Photo 2

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.

Code Snippets

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

<!doctype html>
<html>
<head>
    <title>Your Title Here</title>
</head>
<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>

Context

StackExchange Code Review Q#54631, answer score: 3

Revisions (0)

No revisions yet.