This image is floated to the right and has a left margin of 10px. In this post you will learn how to float an image.

A common question I get is: How do I put such-and-such image next to my big text? Or, how do I get space between my image and the paragraph of text? Or, how can I put an image next to a paragraph of text and include a caption with a link under the image?

All of these questions are related to floating the image. Let’s say you have a big line of text at the top of your web page that says:

You want to put a logo next to that text. I am going to show you how to FLOAT the image. This is how it will look when the logo is floated to the left:

MY COMPANY AND PROUD OF IT

2) You will then define a CSS rule. The rule will help create an area that is floated to the left and given exactly the width of the image:

.myfloat {float: left; width: 150px}

3) You wrap the image inside a div tag and give it a class of myfloat:

You can put the CSS code in your style sheet; this is called style.css if you are using WordPress. Or you can put it directly into a WordPress post by using inline CSS code:

If you think it’s code that you will use repeatedly, you should really put it in your style sheet.

So now you have learned how to float an image to the left (to float it to the right, use float: right), but what about margins and captions? If it’s in a div tag (as opposed to relying on align=”right” or align=”left” inside the image tag), you can easily add a caption inside the div tag. Margins can be added by adding margin rules to the CSS:

Learn more about floats:

• Clear a float
• CSS float property
• Floatutorial
• How To Float an Image to the Left of Text