How to Float an Image to the Right of Text

Use CSS floats to position elements on the page

If you're interested in learning how to float an image to the right of text, you'll be happy to know that it's a fairly simple task. There are many situations where programmers want an image on a Web page to appear inside of the text with the text flowing or wrapped around it. Thankfully, manipulating images is similar to manipulating text, so if you have experience with the latter, this process shouldn't be hard at all.

In fact, with the CSS float property, it's easy to float your image to the right of the text and have the text flow around it on the left side. Use this five-minute tutorial to learn how.

Setting Up a Layout With Float

This basic layout will create a space for your text and float an image to the right of that text. Certainly, these layouts can get more complicated, but this example will show you the basic principle behind working with float and text.

  1. Assuming you already have an HTML document you're working with and a separate CSS style sheet, start by creating a new div to act as the row containing your floated element.

    <div></div>
    
  2. Give that new div two classes, container and clearfix. There are plenty of ways to handle this, and the names are entirely your choice, but these will help you stay organized and establish your layout.

    <div class="container clearfix"></div>
    
  3. In your CSS, define how you want your container to fit within your overall layout. This example is just going to make it a full width row.

    .container {
    width: 100%;
    height: 25rem;
    }
  4. Next, take care of the clearfix class. The clearfix is necessary because float can create some odd glitches in your layout. Defining the "overflow" property in the clearfix stops the floated elements from bleeding out of their designated space.

    .clearfix {
    overflow: auto;
    }
  5. Now, you can create an element within your container div and float it to the right. If you're wrapping text around an image, this would be your image. Create the element and give it a class for the float property.

    <div class="container clearfix">
    <div class="float-right"></div>
    </div>
  6. Create the class for your float. You'll probably want to throw some styling in there too, if you'll be making more identical elements. Otherwise, you can apply a separate class for your styling.

    .float-right {
    float: right;
    width: 300px;
    height: 200px;
    background-color: red;
    margin: 0 0 0.5rem 0.5rem
    }
  7. If you're looking to wrap text around that floated element, insert your text now. Put it anywhere in the container, either before or after the floated element.

    <div class="container clearfix">
    <div class="float-right"></div>
    <p>Some text</p>
    <p>More text</p>
    <p>...and so on.</p>
    </div>
  8. Refresh your page, and check out the result.

    CSS element floated right

Wrapping Up

And that does it. Now you see that floating an image to the right isn't difficult at all. You may also be interested in floating an image to the left and floating it to the center. While the first move is possible, unfortunately, you can't float an image to the center, as that would typically require a two-column layout.