Categories


Floating Images - Part II

We’ve seen how to use the align tag to make images ‘float’ to one side or the other of your page. We’ve also seen how the text will wrap around these images.  But what if you don’t want the text to wrap?

Since a floated image will affect all the elements that follow it, you will need to insert a special line break: clear to control the text. Using the clear attribute along with the regular br tag indicates that the text should not start until the specified margin is cleared. This ‘specified margin’ would be at the end of the image or images.

How to Stop Text from Wrapping

To stop the text from wrapping you would place the cursor at the place where you want to stop wrapping text and elements to the side of the image.  In most cases this will follow the image.  The code used would look like:


– to stop flowing content until there are no more floating images aligned to the left margin


– to stop flowing content until there are no more floating images aligned to the right margin

You can use
– to stop flowing content until there are no more floating images on either margin

To see how this might look, we’ve taken the same HTML code we used for our last sample, but this time we’ve included the clear attribute to see how the text is affected.

Begin HTML Code Sample (Using clear Attribute):

SAMPLE PAGE WITH FLOATING IMAGES & CLEAR ATTRIBUTE



Floating Image . . . Left Side

This image has been coded to float to the left of the page using a clear attribute. Notice how the heading and text now display below the image around the image.



Floating Image . . . Right Side

Notice how the image floats to the right side of the page… but since we’ve used a clear attribute, the text and heading appear below the image.

How to Add  Space Around an Image

If you look at the sample above, you’ll see that the text and heading associated with the second image are butted right up next to the images. However, you can use the vspace and hspace attributes to add a margin of space around the images. Both of these are included in the same line of code you would use for the image.  For example, to add space around an image you would use the following:

hspace=”x”   for horizontal space where x is the number of pixels you want to add on both the right and left sides of the image

vspace=”x”   for vertical space where x is the number of pixels you want to add on both the top and bottom sides of the image

Your code might look like …

… where we’ve placed 10 pixels on the left and right side; and 5 pixels on the top and bottom.

Note that you do not have to add both horizontal and vertical space at the same time.   However, using this attribute does not allow for adding space to only one side of the image. If you want to have space on only one side of the image or if the space needs to be uneven, you would do better to use a graphics program to add in the blank space.

Don’t miss our post next week, we’ve got a super new FREE program to tell you about.


Comments are closed.