HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [107]
Using float with images
The most common place to use the float attribute is with images. Figure 1-1 has a paragraph with an image embedded inside.
It’s more likely that you want the image to take up the entire left part of the paragraph. The text should flow around the paragraph, similar to Figure 1-2.
Figure 1-1: The image acts like a single character without a flow setting.
Figure 1-2: Now the text wraps around the image.
When you add a float:left attribute to the img element, the image tends to move to the left, pushing other content to the right. Now, the text flows around the image. The image is actually removed from the normal flow of the page layout, so the paragraph takes up all the space. Inside the paragraph, the text avoids overwriting the image.
Adding the float property
The code for adding the float property is pretty simple:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
alt = “ball” />
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The only new element in the code is the CSS float attribute. The img object has a float:left attribute. It isn’t necessary to change any other attributes of the paragraph because the paragraph text knows to float around the image.
Of course, you don’t have to simply float to the left. Figure 1-3 shows the same page with the image’s float attribute set to the right.
Figure 1-3: Now the image is floated to the right.
Using Float with Block-Level Elements
The float attribute isn’t only for images. You can also use it with any element (typically p or div) to create new layouts. Using the float attribute to set the page layout is easy after you understand how things really work.
Floating a paragraph
Paragraphs and other block-level elements have a well-defined default behavior. They take the entire width of the page, and the next element appears below. When you apply the float element to a paragraph, the behavior of that paragraph doesn’t change much, but the behavior of succeeding paragraphs is altered.
To illustrate, I take you all the way through the process of building two side-by-side paragraphs.
Begin by looking at a page with three paragraphs. Paragraph 2 has its float property set to left. Figure 1-4 illustrates such a page.
Figure 1-4: Paragraphs 2 and 3 are acting strangely.
As you can see, some strange formatting is going on here. I improve on things later to make the beginnings of a two-column layout, but for now, just take a look at what’s going on:
♦ I’ve added borders to the paragraphs. As you’ll see, the width of an element isn’t always obvious by looking at its contents. When I’m messing around with float, I often put temporary borders on key elements so I can see what’s going on. You can always remove the borders when you have it working right.
♦ The first paragraph acts normally. The first paragraph has the same behavior you see in all block-style elements. It takes the entire width of the page, and the next element will be placed below it.
♦