The octopus, crab, and whale images

Now let's look at one of the images in our HTML file. We can see the octopus image is inside of a container. The container is the figure element:

<figure>    <img src="images/octopus-icon.png" alt="Octopus"></figure>

The figure element doesn't have a width defined, but it's a block-level element that takes up the entire width of its container. So we could think of the figure width as 100%. It's inside of the column div:

<div class="column">    <figure>        <img src="images/octopus-icon.png" alt="Octopus">    </figure>    <h2>The Octopus</h2>    <p>...</p>    <a href="#" class="button">Tenticals &raquo;</a></div>

If we look in our CSS column, we see the column width is 31.25%:

/****************3 columns****************/.column ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.