Topics Map > Campus Services > Web

Web - Adding "Float Left Image" to a Webpage

How do I add a "Float Left Image" to my web page, and what are the benefits of doing so?

The Float Right Image can be used in articles or biographies to enhance the reader's experience or to create a more interesting page layout. The image will align to the right side of the page and any body text will wrap around the left side of the image. This type of image could also be useful in creating a three-column layout design.

How to add it:

  1. Click on the Images tab in the side menu of the Edit Page screen.
    Screenshot of images tab
  2. Scroll down to the field titled "Float Right Image."
    Screenshot of Float Left Panel
    • Use the "upload" tab to add an image from your hard drive.
    • Use the "file browser" tab to choose an image that has already been uploaded to the server.
    • Use the "remote URL" tab to link to an image on another website.
  3. Each image needs to have "alternate text" for screen readers and search engines. The "title" field is optional and can be left blank.
  4. Crop the image if desired.
  5. Save the changes and publish the page.

For a more in depth explanation of this process please take a look at the Video Tutorial provided on the Web Development page.

If you have questions, please contact the Web Development office at 608.342.1444 or  

Keywords:web, drupal, image, layout, float, left, floatleft   Doc ID:34790
Owner:Bryan M.Group:UW Platteville
Created:2013-10-25 12:55 CSTUpdated:2019-02-01 12:08 CST
Sites:UW Platteville
Feedback:  0   0