Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 3: Working with CSS properties CHAPTER 4 187

}

#div2 {

background-color: cyan;

}

#div3 {

background-color: lightpink;

float: left;

width: 80%;

}

#div4 {

background-color: orange;

}

#div5 {

background-color: lightblue;

}

#div6 {

background-color: lightgray;

}

In this example, the div3 float property is set to left, and the width is set to 80 percent.

Figure 4-18 shows the rendered page.

FIGURE 4-18 loating elements with wrappingF

In Figure 4-18, div3 width and float properties are set. The width is set to 80 percent, but

what happens to the leftover 20 percent? In this example, div4 is placed right after div3, so

div4 flows downward until div3 ends. At that point, div4’s width becomes 100 percent. The