But you can overturn the tables; just throw them out. Use techniques similar
to those described for the free-form layout, but when you define your styles,
float the blocks (they’re really columnsnow that they’re horizontally lined up
next to each other). In this next example, you use two columns of text that
resize if the browser is widened or narrowed. (For additional details on using
float, see Chapter 10.)Figure 12-12 and Figure 12-13 illustrate how to use classic columns that resize
in a graceful way when the browser is resized:Here’s the code that produced Figures 12-12 and 12-13, with some of the body
text removed to avoid wasting space:<html>
<head><style>body {
background-image: url(background.jpg);
background-repeat: no-repeat;
padding: 24px;Figure 12-12:
This two-
column
design is
created
without
resorting to
tables. It’s
pure CSS.