Three side-by-side images | PracticalSeries: Web Development

15.3 Three side-by-side images

Now it starts to get repetitive, the three equally wide side-by-side images looks like this:

Figure 99.4 - short image — Figure 99.4 short image

Figure 99.5 - Tall image — Figure 99.5 Tall image

Figure 99.6 - short image — Figure 99.6 short image

This has the same figure element as the previous two, but this time it has three div elements within it, each of class fig-col.

In the case of the three side-by-side images, each div also has the class fig1-3 (spans one column of three), the HTML being:

one third width image html

<div class="fig-row">
    <figure class="fig-col fig1-3" id="js--f99-04">
<img src="01-pages/99-00-typicals/02-images/fig-99-04.png" alt="Figure 99.4 - short image">
        <figcaption>Figure 99.4 &emsp; short image</figcaption> 
    </figure>
    <figure class="fig-col fig1-3" id="js--f99-05">
<img src="01-pages/99-00-typicals/02-images/fig-99-05.png" alt="Figure 99.5 - Tall image">
        <figcaption>Figure 99.5 &emsp; Tall image</figcaption>
    </figure>
    <figure class="fig-col fig1-3" id="js--f99-06">
<img src="01-pages/99-00-typicals/02-images/fig-99-06.png" alt="Figure 99.6 - short image">
        <figcaption>Figure 99.6 &emsp; short image</figcaption>
    </figure>
</div>

Code 15.4 Basic half width side-by-side images HTML

It literally is the same as the half width images except there are three figure elements and each of these has the class fig1-3 instead of fig1-2.

The fig1-3 class differs only in its width:

.fig1-3 { width: 31.16%; }
.fig1-3 img { width: 100%; }

Here the width of each image div is approximately one third of the central column width (just less to allow for the whitespace between images).

Again, the image and caption are done in exactly the same way as before (see §§ 15.1.2-15.1.3).