15Basic figures

This is the final type of image display provided in the template, it is two side-by-side images (like § 15.2), but in this case the images are different widths; the first image is approximately one-third of the central column wide, the second is two-thirds wide:

In terms of the figx-y classes used, I’ve considered this to be a three column arrangement with the first image spanning one of the three columns (a fig1-3 class); the second image spans two of the three columns (i.e. a new fig2-3 class).

There are only two images, so the HTML only has two of the div elements within the figure element:

<div class="fig-row">
    <figure class="fig-col fig1-3" id="js--f99-07">
<img src="01-pages/99-00-typicals/02-images/fig-99-07.png" alt="Figure 99.7 - 1/3 width">
        <figcaption>Figure 99.7 &emsp; &#x2153; width</figcaption>
    </figure>
    <figure class="fig-col fig2-3" id="js--f99-08">
<img src="01-pages/99-00-typicals/02-images/fig-99-08.png" alt="Figure 99.8 - 2/3 width">
        <figcaption>Figure 99.8 &emsp; &#x2154; width</figcaption>
    </figure>
</div>

Apart from the fig2-3 class, this is identical to the half width side-by-side image of § 15.2, the only thing to do is to add the fig2-3 class, it looks like this

.fig2-3 { width: 64.82%; }
.fig2-3 img { width: 100%; }

The fig2-3 class spans the space of two of the fig1-3 classes plus the 2.5% column that would have been between them in a three column arrangement, its width is thus 2 × fig1-3 width + 2.5%, that works out at 64.82%.

The image and figcaption are just the same as all the other examples.

• If you want the wide image first, just make the first div fig2-3 and the second div fig1-3.