Chapter 31. Floating Inline Images with CSS

As with all design and formatting issues these days, the politically correct method for floating inline images is not by setting the align attribute of the img tag to left or right (see Topic 30), but by using Cascading Style Sheets (CSS). On the plus side, CSS gives you more options than the align attribute does. On the minus side, browsers regularly flake out on CSS wherever they find it, so you need to test your CSS styling in a variety of browsers.

The first step is to float the inline image against a block of text, as in Figure 31.1. As you might guess, the CSS style definition float: left; pushes the image to the left of the text block, while float: right; pushes the image to the right.

Listing 31.1. View Source for Figure 31.1.

[View full width]

 <h2>A complete brain-trust solution</h2> <p><img src="/books/2/30/1/html/2/images/bulb.gif" width="47" height="84" style="float: left;">When you consult  with us, you'll be amazed at the results. We offer the most interesting, creative,  out-of-the-box, and forward-thinking ideas in the industry. You won't believe what we'll  come up with next. We have won several international awards for our ideas alone, including  the prestigious Nobel Prize. You simply won't find better ideas anywhere.</p> 

Figure 31.1. Floating an inline image with CSS is pretty straightforward.

So far, so good, but CSS hasn't given you anything that you can't get with the align attribute of the img tag. The fun begins when you break a single block of text into two or more pieces, as in Figure 31.2. You can then change the way the additional text blocks flow around the floating image.

Listing 31.2. View Source for Figure 31.2.

[View full width]

 <h2>A complete brain-trust solution</h2> <img src="/books/2/30/1/html/2/images/bulb.gif" width="47" height="84" style="float: left;"> <p>When you consult with us, you'll be amazed at the results. You won't believe what we'll  come up with next.</p> <p>We have won several international awards for our ideas alone, including the prestigious  Nobel Prize. You simply won't find better ideas anywhere.</p> 

Figure 31.2. Normally, when you break the text into two blocks, the second block wraps around the floating image nicely, just like the first.

For instance, clearing the new paragraph to the left forces it to begin underneath the left-floating image instead of wrapping around it, as Figure 31.3 shows.

Listing 31.3. View Source for Figure 31.3.

[View full width]

 <h2>A complete brain-trust solution</h2> <img src="/books/2/30/1/html/2/images/bulb.gif" width="47" height="84" style="float: left;"> <p>When you consult with us, you'll be amazed at the results. You won't believe what we'll  come up with next.</p> <p style="clear: left;">We have won several international awards for our ideas alone,  including the prestigious Nobel Prize. You simply won't find better ideas anywhere.</p> 

Figure 31.3. Clear the second paragraph to the left to make it begin directly under the left-floating image.

To see what's happening here, add another inline image, and this time, float it to the right, as in Figure 31.4. The second paragraph clears the left-floating image but wraps around the right-floating image.

Listing 31.4. View Source for Figure 31.4.

[View full width]

 <h2>A complete brain-trust solution</h2> <img src="/books/2/30/1/html/2/images/bulb.gif" width="47" height="84" style="float: left;"> <p>When you consult with us, you'll be amazed at the results. You won't believe what we'll  come up with next.</p> <img src="/books/2/30/1/html/2/images/bulb.gif" width="47" height="84" style="float: right;"> <p style="clear: left;">We have won several international awards for our ideas alone,  including the prestigious Nobel Prize. We have won more awards than any other brain trust  in the greater Cleveland area. You simply won't find better ideas anywhere. In fact, we  guarantee it. How's that for a great idea?</p> 

Figure 31.4. When you add a right-floating image, the second paragraph wraps around it, since you specified that it should only clear the left.

TIP

To clear a right-floating image, use the definition clear: right; instead.

If you want the second paragraph to clear the floating images on the left and the right, use the style definition clear: both;.

Table 31.1 summarizes CSS styles for floating and clearing.

Table 31.1. Floating and Clearing with CSS

STYLE	EFFECT
clear: both;	Prevents a block of text from wrapping around preceding left- and right-floating images
clear: left;	Prevents a block of text from wrapping around preceding left-floating images
clear: right;	Prevents a block of text from wrapping around preceding right-floating images
float: left;	Floats the image to the left of the blocks of text that follow
float: right;	Floats the image to the right of the blocks of text that follow