Here's a series of tests with floating divs and images. So that tests don't affect other tests, an 'hr' tag with a property of 'clear:both' is placed after each test, to de-activate all floats that are in effect.

For all examples, div1 has a width of 350, div2 has a width of 300, and textdiv (if used at all) has a width of 250. Scroll down to see examples with images.

Example 1: div1 is not floated and div2 is not floated

Example 2: div1 is not floated and div2 is floated left

Example 3: div1 is not floated and div2 is floated right

Example 4: div1 is floated left and div2 is not floated

Example 5: div1 is floated left and div2 is floated left

Example 6: div1 is floated left and div2 is floated right

Example 7: div1 is floated right and div2 is not floated

Example 8: div1 is floated right and div2 is floated left

Example 9: div1 is floated right and div2 is floated right. Notice that this reverses the order of the divs, since div1 floated right first, making that space unavailable for div2 which floated right AFTER div1 already did.

Example 10: div1 is not floated, div2 is not floated, and the image in div1 is not floated

This is div 1. It is not floated. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue varius risus, ac bibendum tellus convallis quis.

Example 11a: div1 is not floated, div2 is not floated, but the image in div1 is floated left. Notice that the spacing is tighter than example 10, because the baseline of the image is no longer forced to be in line with the baseline of the text, since the image is floating.

This is div 1. It is not floated, but the image within div1 IS floated left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue varius risus, ac bibendum tellus convallis quis.

Example 11b: div1 is not floated, div2 is not floated, but the image in div1 is floated left. Div1 has less text than Example 11a, and notice that the floating image is 'invading' div2.

This is div 1. It is not floated.

Example 12: div1 is floated left, div2 is not floated, and the image in div1 is floated left. Floating div1 prevents the floated image within div1 from invading (overlapping) div2.

This is div 1. It is floated left.

Example 13: div1 is floated left, div2 is not floated, the image in div1 is floated left, and the text within div1 has its own div that's not floated.

This is div 1. It is floated left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue varius risus, ac bibendum tellus convallis quis.

Example 14: div1 is floated left, div2 is not floated, the image in div1 is floated left, and the text within div1 has its own div that's floated left.

This is div 1. It is floated left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue varius risus, ac bibendum tellus convallis quis.

Example 15: div1 is not floated, div2 is not floated, the image in div1 is not floated, and the text within div1 has its own div that's not floated.

This is div 1. It is not floated. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue varius risus, ac bibendum tellus convallis quis.