15Basic figures


Other column arrangements

The previous sections showed the figure arrangements for what I think are the most common arrangements:

  • A full width image

  • Two side-by-side half width images

  • Three side-by-side ⅓ width image

  • Two side-by-side asymmetric ⅓ and ⅔ width images

By far the most common is the first; most images are single, full width images

You can of course have any other arrangement you want, it is just a question of defining new figx-y classes for the figures.

The way to figure it out is to decide how many columns you are working with.

If you wanted three images in a ⅕-⅗-⅕ width arrangement then you are working with a five column arrangement.

If you wanted two images where the first was ¾ of the central column wide and the second ¼ wide then you would be dealing with four columns.

The number of columns is the denominator of the fraction (the number at the bottom, 5 in the first example, 4 in the second)

So that gives you the y number in the figx-y class, the y number must be the same for all the figure element in the row.

The x number is the span and that is the numerator in the fraction (top number, in the second example, the wide image was ¾ so x would be 3 and the narrow image is ¼ so in this case x is 1)

So that determines the classes that are needed.

In the first example there were three images, the first ⅕ wide, the second ⅗ wide and the third ⅕ wide. Giving classes fig1-5, fig3-5 and fig1-5.

In the second example we had a ¾ width image and a ¼ width image, the classes for these would by (respectively) fig3-4 and fig1-4.

The only thing left is to determine the width of the figx-y classes. The formula for this is:

`fig"x-y"_"width%" =(100 xx x)/(y)-2.5(1-x/y)-0.5`

So, for fig3-5 we would have:

`fig"3-5"_"width%" =(100 xx 3)/(5)-2.5(1-3/5)-0.5`

Which is:

`fig"3-5"_"width%" =60-1-0.5=58.5%`

Thus the CSS for fig3-5 would be:

.fig3-5 { width: 58.5%; }
.fig3-5 img { width: 100%; }

For the fig1-5 we get

`fig"1-5"_"width%" =(100 xx 1)/(5)-2.5(1-1/5)-0.5`


`fig"1-5"_"width%" =20-2-0.5=17.5%`


.fig1-5 { width: 17.5%; }
.fig1-5 img { width: 100%; }

The same results for the fig1-4 and fig3-4 classes would give:

.fig1-4 { width: 22.62%; }
.fig3-5 img { width: 100%; }


.fig3-4 { width: 73.87%; }
.fig3-5 img { width: 100%; }

The HTML for the five column arrangement would be:

<div class="fig-row">
    <figure class="fig-col fig1-5" 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 class="fig-col fig3-5" 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 class="fig-col fig1-5" 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>

The HTML for the four column arrangement would be:

<div class="fig-row">
    <figure class="fig-col fig3-4" 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 class="fig-col fig1-4" 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>

End flourish image