188 CHAPTER 4 Getting started with CSS3
net effect is that div4 wraps around div3. This technique is commonly used to insert pictures
in an HTML document so that the text wraps around the image.
When multiple elements’ float property is set to the same direction, the elements stack
horizontally. This behavior can be used to create columns. In the following example, the float
property of div3, div4, and div5 is set to left, and their width property is set to 33 percent,
using the following style rules.
p {
margin: 0px;
}div {
border: solid;
border-color: black;
}#div1 {
background-color: yellow;
}#div2 {
background-color: cyan;
}#div3 {
background-color: lightpink;
float: left;
width: 32%;
}#div4 {
background-color: orange;
float: left;
width: 32%;
}#div5 {
background-color: lightblue;
float: left;
width: 32%;
}#div6 {
background-color: lightgray;
}The width is set to 32 percent instead of 33 percent because the width setting does not
include the border width, which is defaulting to 2 pixels. The result is shown in Figure 4-19.