One of the most important properties for web design is the Float property. The Float property is used to move elements to the right or left, so other elements can wrap around them. Many web designers use the Float property to wrap text around images without creating classes or IDs. When we use the Float property, elements that are continuous to the element will flow around it, depending on where the floated element was located at first and its Float value. Its markup values are: left, right, none, or inherit. Floated elements will move until they find a container. If your element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element’s width to avoid errors or miscalculations.
In this tutorial we will learn how to float an image to the left, so text will float around it without leaving white space around the image.

STEP ONE:

Let’s start by creating a basic HTML file with some content:

STEP TWO:

Now, find any image that you want to include within the content. I chose the following image and I saved it for web inside a predestined images folder for my HTML page:
Step Two Image
You can use your own image, or download my image at the end of this tutorial.

Place the image on the same line as text. I placed mine within the first paragraph tag:

NOTE: Make sure to place elements that you plan to float before any element you wish to wrap around.

Preview in browser:
Step Two Preview
Notice that the HTML places our image as a container creating an unappealing white space around the image.

STEP THREE:

Luckily, we have a CSS property to fix the unpleasant open space around our image. Let’s Float our image to the left, so content can follow the element’s block and wrap around it.
Link a CSS file to your HTML and add the following declaration for your image:

Preview in browser:
Step Three Preview

Way better, huh?

STEP FOUR:

To create a little bit of space between our image and content let’s add a right margin to our image declaration:

Preview in browser:
Step Four Preview

Congratulations! You learned how to correctly place and float any element within your HTML page. Practice with more images and values to dominate CSS; as Publilius Syrus once said, “Practice is the best of all instructors”.

Download Source Files