15Basic figures

I’ll go through each of the different image arrangements that are provided by default with the website template, the previous section covered the single, full width image; this looks at the next type: two half width images that are side-by-side:

This is very similar to the full width image of previous section, the HTML being:

<div class="fig-row">
    <figure class="fig-col fig1-2" id="js--f99-02">
<img src="01-pages/99-00-typicals/02-images/fig-99-02.png" alt="Figure 99.2 - Tall image">
        <figcaption>Figure 99.2 &emsp; Tall image</figcaption>
    </figure>
    <figure class="fig-col fig1-2" id="js--f99-03">
<img src="01-pages/99-00-typicals/02-images/fig-99-03.png" alt="Figure 99.3 - short image">
        <figcaption>Figure 99.3 &emsp; short image</figcaption>
    </figure>
</div>

The fig-row classes and the fig-col classes are the same classes of the previous sections.

The HTML starts in just the same way, a div element with class fig-row that again establishes a row in the central column area

The difference is that there are now two figure elements (one for each image), each of which if virtually identical to the figure element of § 15.1.1:

    <div class="fig-col fig1-2" id="js--f99-02">

Each figure element has the class fig-col (just like the full width image), the difference is it now has the class fig1-2; the full width image had the class fig1-1.

In this case fig1-2 means it spans one column of a two column row.

The CSS for this is:

.fig1-2 { width: 48.25%; }
.fig1-2 img { width: 100%; }

The fig1-1 class set the width to be 100%; the fig1-2 class is setting the width to be 48.5%, roughly half the screen less the margins that give the central column.

• The more observant amongst you may be wondering about the 48.25% and thinking I’ve got the maths wrong — you would be right. The width of the central column is 100%; a single margin of 2.5% has been applied to the second fig-col class, that leave 97.5% of the screen area and half of this would be 48.75% not 48.25%.

The reason I reduced the percentage is if I used exactly 48.75%, I occasionally found that the images were stacking up one on top of the other and I think this was down to rounding errors (unlike the responsive grid, which always gave whole number results, here we’re dealing with fractions of a pixel and I think this is what leads to the rounding errors). To get round this I made the percentage value slightly less, I rounded down to 48.25.

The image descendant class (img) is again set to be 100%, this is 100% of the fig1-2 width which in turn is 48.25% of the central column width (i.e. the image is just less than 50% of the central area.

The first div contains the image to be displayed (with the src and alt attributes just like before:

<img src="01-pages/99-00-typicals/02-images/fig-99-02.png" alt="Figure 99.2 - Tall image">

And this is followed by the figcaption for the first image (again this is just like the full page image)

<figcaption>Figure 99.2 &emsp; Tall image</figcaption>

The second image is contained in another div that apart from the actual image and caption being used is identical to the first.