• Choose a category
• All
• Classic-Fiction

This is because a floated element is removed from the normal flow of the page. Paragraph 3 has access to the space once occupied by paragraph 2, but the text in paragraph 3 will try to find its own space without stepping on text from paragraph 2.

Somehow, you need to tell paragraph 3 to move away from the paragraph 2 space. This isn’t a difficult problem to solve once you recognize it. Figure 1-6 shows a solution.

The margin-left property of paragraph 3 is set to 53 percent. Because the width of paragraph 2 is 50 percent, this provides a little gap between the columns. Take a look at the code to see what’s going on here:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Specifying the width

Paragraph 1.

This paragraph has the normal behavior of a block-level element.

It takes up the entire width of the page, and the next element

is placed underneath.

Paragraph 2.

This paragraph is floated left. The

next element will be placed to the right of it. Now this has a width

of 50%.

Paragraph 3.

This paragraph now has a margin-left so it is separated from the

previous paragraph. Its width is still automatically

determined.

Figure 1-6: The left margin of paragraph 3 is set to give a two-column effect.

Using Float to Style Forms

Many page layout problems appear to require tables. Some clever use of the CSS float can help elements with multiple columns without the overhead of tables.

Forms cause a particular headache because a form often involves labels in a left column followed by input elements in the right column. You’d probably be tempted to put such a form in a table. Adding table tags will make the HTML much more complex and isn’t required. It’s much better to use CSS to manage the layout.

You can float elements to create attractive forms without requiring tables. Figure 1-7 shows a form with float used to line up the various elements.

Figure 1-7: This is a nice-looking form defined without a table.

As page design gets more involved, it makes more sense to think of the HTML and the CSS separately. The HTML will give you a sense of the overall intent of the page, and the CSS can be modified separately. Using external CSS is a natural extension of this philosophy. Begin by looking at floatForm.html and concentrate on the XHTML structure before worrying about style:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”floatForm.css” />

While you look over this code, note several interesting things about how the page is designed:

♦ The CSS is external. CSS is defined in an external document. This makes it easy to change the style and helps you to focus on the XHTML document in isolation.

♦ The XHTML code is minimal. The code is very clean. It includes a form with a fieldset.