Clearing FloatsClearing a float means clearing away all subsequent content so that the element is still floated but is not surrounded by the other elements. The clear property takes a value of left, right, or both. By adding the clear: right; property to the content division, the floating navigation remains in place, but the text is cleared (see Figure 12-13). Figure 12-13. Clearing a float allows the floated element to remain in place, while the subsequent content is cleared from around it.I created two floating boxes in Example 12-9. Example 12-9. Styling two floating boxes, one to the left and one to the right#nav {float: right; border: 1px solid red; padding-right: 20px; padding-top: 10px; margin-left: 10px;} #nav2 {float: left; border: 1px solid red; padding-right: 20px; padding-top: 10px; margin-right: 10px;} Figure 12-14 shows what happens when I don't use a clear property for the content. Figure 12-14. Without a clear, the content flows normally with the floated boxes.I added a clear: both to the content style (see Figure 12-15). Figure 12-15. Clearing both the left and right floated boxes.Interesting, eh? You can see the beginnings of columns. You'll be working with floated columns in Chapter 13. |