Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 61

Common elements rendered inline by default are SPAN , A , INPUT , and IMG .
Note By using the display property, you can turn block elements into inline elements and
vice versa. What browsers do normally is simply a predefined setting that can be changed
by developers.
Floating elements around
Sometimes blocks and inline display modes are not enough to achieve your graphics goals. Let's
consider the following HTML markup:
<div id="article">
<img src="picture.png" />
<span>Some possibly long text</span>
</div>
By default, image and text are rendered side by side, and the text is placed at the bottom of the
image, as shown in Figure 3-3.
FIGURE 3-3 Basic alignment of image and text.
Via CSS, you can alter the vertical alignment of the text to middle or top. However, none of these
tricks will give you what you likely want—text floating around the image, as depicted in Figure 3-4.
FIGURE 3-4 Text floating around an image.
To achieve this effect, you need to deal with the float: property. The float: property has the effect of
displaying elements next to one floated on a continuous flow that automatically wraps to the next line
when the containing box ends. The float: property uses values like left or right to denote the direction of
the flow. The following CSS applied to the former HTML snippet produces the output of Figure 3-4.
#article {
float: left;
width: 100px;
}