Skip to main content

TERMINALFOUR (T4) Tip 6: Floating Images

Intended Audience:

TERMINALFOUR WEB MAINTAINERS, END-USER MODERATORS, PRIMARY WEB COORDINATORS and CONTRIBUTORS

TIP: Using the Edit Media Attributes dialog box makes positioning images next to text easier.

Explanation: At some point you will want to float a picture either left or right next to some text. You will need to use two unique CSS classes: “image-left” , “image-right”, “clear-all”, or “clear-both”.

NOTE: A brief tutorial on “clear- all” and “clear-both” is located here.

If the classes are not applied you might get something like this:

floating-images

To get images in your pages to correctly position next to your text, follow these simple steps:

  1. Insert the image
  2. Right-click on the image
  3. Select edit media attributes
  4. In the class field: “image-left” or “image-right”

floating-images3

After completing step four, you should get something that looks like this:

floating-images4

*Note: Use this guide to resize images correctly and consistently.