14.3. Controlling White Space

Typically, you won't concern yourself over how white space is rendered in documents. However, there are times when you will need finer control over how a user agent pads elements or converts white space.

14.3.1. Floating Objects

Allowing elements to float in your documents can make them seem more dynamic. Floating elements float against a margin, allowing other elements to flow around them. For example, consider the following code and the results shown in Figure 14-5:

<p><b>Floating Image</b><br />
<img src="smsphere.jpg" alt="small sphere" style="float: 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.</p>
<p><b>Non-Floating Image</b><br /> <img src="smsphere.jpg" alt="small sphere" style="float: none;"> 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 ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.