HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

Chapter 1. Fun with the Fabulous Float

In This Chapter

• Understanding the pitfalls of traditional layout tools

• Using float with images and block-level tags

• Setting the width and margins of floated elements

• Creating attractive forms with float

• Using the clear attribute with float

One of the big criticisms of HTML is its lack of real layout tools. You can do a lot with your page, but it's still basically a list of elements arranged vertically on the screen. As the Web matures and screen resolutions improve, people want Web pages to look more like print matter, with columns, good-looking forms, and more layout options. CSS provides several great tools for building nice layouts. After you get used to them, you can build just about any layout you can imagine. This chapter describes the amazing float attribute and how it can be used as the foundation of great page layouts.

Avoiding Old-School Layout Pitfalls

Back in the prehistoric (well, pre-CSS) days, no good option was built into HTML for creating a layout that worked well. Clever Web developers and designers found some ways to make things work, but these proposed solutions all had problems.

Problems with frames

Frames were a feature of the early versions of HTML. They allowed you to break a page into several segments. Each segment was filled with a different page from the server. You could change pages independently of each other, to make a very flexible system. You could also specify the width and height of each frame.

At first glance, frames ...