Let's work through the CSS that styles our images within the page layout. To give a percentage width to our images, perform the following steps:
1. First, we will set the styling for all the images as follows:
#banner-pics img { width: 32%; margin: 10px 2% 0; height: auto; float: left; }
2. Next, we will set the additional styling for the right-hand side margin as follows:
#banner-pics img.right { margin-right: 0; }
We looked at the CSS that makes our images resize and display side by side on all screen sizes.
Let's step through what that code does as follows:
1. Firstly, we will look at the code snippet for the image styling:
#banner-pics img { width: 32%; margin: 10px 2% 0; height: auto; float: left; }
Let's look at the maths. The total width of the images should add up to 100 percent, as we want them to fit perfectly in our layout. Each image has a
width
of32%
plus a right-hand sidemargin
of2%
, adding up to 102 percent...