Mastering CSS

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 ...