Using Floating Elements

The browser renders the elements of an HTML page with a flowing layout. This means that it places the inline elements from left to right, and when it is necessary it starts a new line. Block elements are rendered from the top of the window down to the bottom.

You can change this behavior with the float property; setting its value left or right moves the related block element to the left or to the right, and the subsequent content wraps around the floating element.

Listing 10-12 shows a simple web page that does not contain floating elements, it is displayed in the image that follows.

Listing 10-12: Using floating elements