Adding a related articles section with thumbnail images

Our article page is still a fairly bare-bones experience at the moment. Let's try to improve it. A common design pattern is to include a related or recommended content section at the end of an article. Let's add this to the bottom of our page. It will consist of a list of three or four articles, with thumbnails and text. Building this will help to improve our understanding of AMP's layout system.

For the list of items, we'll use an unordered list ul. Each item in the list will have an HTML5 figure element, which in turn will have a thumbnail image, amp-img, and associated text figcaption.

We'll use layout="fixed" for the thumbnail images so that they will all be a fixed size; we'll explore other options shortly (full code at /ch3/related-float.html):

<figure class="related-thumb">
  <amp-img src="img/penguin.jpg" width="125" height="75" layout="fixed">
  </amp-img>
  <figcaption>
    If a penguin can find a soul mate, I'm sure I can too
    <span class="author">Rebekah Crane</span>
  </figcaption>
</figure>

We'll add a touch of styling for the caption and author text:

figcaption {
  font-family: Georgia;
  font-weight: bold;
}

.author {
  color: #bbb;
  display:block;
}

If you look at this in a browser, the text caption displays underneath the image. Ideally, we'd like this to be to the right of the thumbnail. We can achieve this with a little CSS. The old school way to achieve this might be to use the CSS float property like this:

.related-thumb amp-img {
  margin-right:5px;
  float:left;
}

Now the text flows around the image. However, since we are building a list of three or four items, if we use the float property like this, we'll need to clear the float before the next item or the list items will keep floating to the side of the previous one and it will be a mess. Perhaps there's a better way to achieve this layout.