Categories


How to Make Images Float

We’ve seen how an image can be placed in a specific area of a page by using tables. However, you can also include images by using the ‘align’ attribute to make images float along one side or other of the page. If you’re familiar with using Word Press, this ‘align’ process is much the same as inserting images in your post. When you align an image on a page – left or right, you have the image display with the text and other elements wrapping around. The code used to accomplish this is within the page’s HTML code.

Floating a Image on One-side

Sample line of code:

  1. Type [ image_name.jpg is the image name and location of the image on the server ]
  2. Type either align=”left” or align=”right” depending on which side you want the image to float to. Remember, any text associated will flow to the opposite side of the page.
  3. Add other image attributes, i.e., width, height, border, etc. before you….
  4. Type the final /> to close the line
  5. Create the elements, text that should flow next to the image

Floating an Image on Both-sides

To float both left and right side images on one page you put in two (2) lines of code; one for the left image and one for the right image. The screen capture below shows the results when having two (2) images float on one page.

To force the text to wrap for our sample, we’ve put our images inside of a table with a width of 400 pixels. We’ve placed the code used below for reference.

Note:   we’ve use the paragraph tag

to begin a new paragraph and have the text align with the new image. Use the

tag to close paragraphs, text, etc.  associated with any image.

HTML Code:

SAMPLE PAGE WITH FLOATING IMAGES


Floating Image . . .

Left Side This image has been coded to float to the left of the page. Notice how the heading and text wrap around the image.

Floating Image . . . Right Side

Notice how the image floats to the right side of the page, while the text and heading appear to the left. More text will continue to wrap around the image filling in the blank space.

Helpful Tips

  • When aligning images, remember it will be the image that appears left or right – not the text.
  • Place the image directly before the text it is to ‘disrupt’.
  • The text will continue to appear on the opposite side from the image until there is no more text or a break is encountered.

Conclusion

This is an easy way to include images and incorporate them with text without having to use tables. However, there may be times when you don’t want the text to wrap. Next week we’ll look at how to stop elements from wrapping and we’ll learn how to add space around a floating image.

Comments are closed.