CSS Image Placement and Text Wrapping

By default our HTML images will just sit on our page and push our text all over the place - not very attractive. But as usual CSS comes to the rescue and allows us to control the positioning of our images, and how text wraps around them.

We can position our images using the CSS float property, and can assign it a value of either left or right:

img {
	float: left;
}

If we float our image to the left, then any text around the image will wrap around the right-hand side of the image, and if we float it right the opposite happens.

As you can see, the two images float to the left and right of the text, which allows us to set out our page just how we want it.

Of course it is perfectly reasonable for us to want to use left-floated images sometimes and right-floated images other times. In this case it is best to set up two classes of image, one left- and one right-floated:

img.left {
	float: left;
}

img.right {
	float: right;
}

Then when we insert an image into our HTML we simply have to declare which one we want:

<img class="left" src="..." />

or

<img class="right" src="..." />

We can also apply any other styling we want to these individual classes, or to the main <img> tag so that the styling is applied to both the left and right classes.