Creating a Multicolumn Layout - CSS3 Foundations - page 121

.product {
float: left;
}
2. Save styles.css.
As shown in Figure 8-1, the product image now floats to the left of the containing element, and following elements
that were vertically positioned below that element now flow to its right. By floating the elements this way, you util-
ize some of that unused space, and the image looks as though it relates to the text now.
Of course, you can float elements to the right of the containing element too, by declaring float: right; , which
makes elements flow to the left of that floated element.
float also accepts the value none , which means an element should not float.
When using float , you can style a floating element just as you would when it's not floating. Although having the
text flow to the side of the product image is desired, at the moment there's not much space between the image and
text. You can change that:
1. In styles.css, add the following to the .product rule set:
margin: 0 1em 1em 0;
2. Save styles.css.
The image now has a small amount of white space to its right as well as below it.