Don't waste paper! A one page printable copy of the information is available.
Click on review link by the mini-exam for this unit.

Nuances of floating

Example of floated image with all the items in one division

Image floated left text wrapped nicely around image

Example of floated image & text in a division and a subsequent division with some text which moves up. The subsequent division has a blue background.

Image floated left text wrapped nicely around image. There is a second division also floated next to the image which has a blue background

To demonstrate that the elements are actually behind the floated image, I've added a left margin to the image and added background color to the first heading

Image floated left text wrapped nicely around image. There is a second division also floated next to the image which has a blue background.  Heading and second division have blue background The image has a margin to the left which shows the blue background for the heading and the division

To keep a subsequent division from moving up. Use Clear to clear float for subsequent division or set the first division to the same height as the image.

Image floated left text wrapped nicely around image. The second division now displays below the image.

 

Previous SlideNext Slide