To move the container across to the right edge of the browser window, use float: right. When the container is floated, it must be given a width. In this case, you will use width: 182px. Why the strange width? The image inside of this container is 180px wide. Later in this lesson, the image will be given a 1px-wide border. The right border width (1px), left border width (1px), and image width (180px) add up to 182px. Next, you might want to create some space around the container so that text and other elements don't butt up against it (see Figure 11.1). You can achieve this by applying margins to the right, bottom, and left of the container as shown in Listing 11.3. Figure 11.1. Screenshot of floated container.
Listing 11.3. CSS Code Floating the Containerdiv.imagecaption { float: right; width: 182px; margin: 0 1em 1em 1em; display: inline; }
|