Share this Page URL

Part: III Image Topics > Floating Inline Images with CSS - Pg. 146

146 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. Example 31.1. View Source for Figure 31.1. <h2>A complete brain-trust solution</h2> <p><img src="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-