Приглашаем посетить
Черный Саша (cherny-sasha.lit-info.ru)

Creating a Side-By-Side Variation

Previous Page
Table of Contents
Next Page

Creating a Side-By-Side Variation

Using the same selectors and HTML code, it is possible to change the lay-out to display the image and caption side by side.

First, the width of the container will need to be increased to accommodate the new caption and image locations. The declaration can be changed to width: 302px. This width can be changed to suit your needs.

Next, padding can be set to 10px for all sides because you do not need any space for a background image.

The background-image, background-repeat, and background-position properties can also be removed, leaving a simple declarationbackground: #036.

The image must be floated to the right so that the caption can sit beside it. Width does not need to be defined in this case because the image has its own intrinsic width.

Finally, the image will need to be given some margin so that the caption doesn't butt up against it. You can use margin-right: 1em as shown in Listing 11.7 and illustrated in Figure 11.6.

Listing 11.7. CSS Code for the Side-By-Side Variation
div.imagecaption
{
    float: right;
    width: 302px;
    margin: 0 1em 1em 1em;
    display: inline;
    padding: 10px;
    background: #036;
    color: #fff;
}

div.imagecaption img
{
    float: right;
    margin-left: 1em;
    border: 1px solid #fff;
}

Figure 11.6. Screenshot of the side-by-side variation.

Creating a Side-By-Side Variation



Previous Page
Table of Contents
Next Page