Floating images left and right with CSS

Floating images left and right is very easy with CSS. We just need to use our float declaration and set the value to either left or right. If you're the only one working on the website, setting these parameters is easy. If clients are updating the website, floats become slightly more complicated and you need to work out the CSS in advance so their actions are what you intend them to be.

Street sign that has an arrow going left and rightFor example we like to add the class name float-left and float-right to our images that we wanted floated. We like these class names as they illustrate exactly what is happening with the images.

A client using a CMS most likely doesn't use the word floating, but maybe uses aligning images left and right instead. Therefore a better class name for a client to use could be left or right.

Wordpress is great for clients as it allows them to select left or right through the media insertion screen. What this does is add the class names alignright and alignleft left to our images.

Therefore we need to take into account all our class names that we could possibly use. We also should include a nice margin to our floating images so there is some breathing space between the image and the text.

img.float-right, img.alignright, img.right { float:right; margin:0 0 15px 30px; } img.float-left, img.alignleft, img.left { float:left; margin:0 30px 15px 0; }