HOW TO FLOAT TEXT AROUND AND IMAGE

If you try to wrap text around and image, it won't work with just a plain image tag. It require an ALIGN attribute within your image tag.

For and image displayed on your left:


By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.

As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image.

For and image displayed on your right:

By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.

As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image.to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image.

As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image.

Both LEFT and RIGHT control where the image displays in relation to the browser margin. The surrounding text wraps around it from top to bottom. Here's a list of possible values:



HOW TO FLOAT AN IMAGE IN CSS

CSS properties offer more options and greater flexibility in positioning page elements and controlling the flow around them. Sub-section 9.5 Floats of the CSS 2.1 Visual formatting model provides the following definition: A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

Tutorial - Floating an image to the right

Step 1 - Start with a paragraph of text and an image

For this exercise, we want to force an image over to the right to allow the content to flow alongside it. We also want to add margins to the left and bottom sides of the image to push the content away. Finally, we want to add a border around the image. We start with an image sitting inside a paragraph of text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

CSS CODE
None

HTML CODE
<p>
<img src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>

Step 2 - Apply float: right to the image and Adding margin

Margins can be added to push the content away from the left and bottom sides of the image.

Netscape 4 badly misinterprets margins. To hide margins from this browser, but allow them to be applied by standards compliant browsers, place the margin rules in a separate style sheet and use "@import" to link the style sheet to your html page.

We are using a shorthand rule here: "margin: 0 0 10px 10px;". Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

CSS CODE
.floatright
{
float: right;
margin: 0 0 10px 10px;
}

HTML CODE
<p>
<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>

Step 3 - Add a border

To add a border to the image, use "border: 1px solid #666;". Again, Netscape 4 does not like this rule, so it should be hidden from the browser using "@import".

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

CSS CODE
.floatright
{
float: right;
margin: 0 0 10px 10px;
border: 4px solid #666;
}

HTML CODE
<p>
<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>
Tutorial by: Sarah Payne