• Choose a category
• All
• Classic-Fiction

By Root 1468 0

The second paragraph is pretty normal. The second paragraph has its float attribute set to left. This means that the paragraph will be placed in its normal position, but that other text will be placed to the left of this element.

♦ The third paragraph seems skinny. The third paragraph seems to surround the second, but the text is pushed to the right. The float parameter in the previous paragraph causes this one to be placed in any remaining space (which currently isn’t much). The remaining space is on the right and eventually underneath the second paragraph.

The code to produce this is simple HTML with equally simple CSS markup:

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

Float Demo

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. It is placed to the left, and the

next element will be placed to the right of it.

Paragraph 3.

This paragraph has no floating, width or margin. It takes whatever

space it can to the right of the floated element, and then flows

to the next line.

As you can see from the code, I have a simple class called floated with the float property set to left. The paragraphs are defined in the ordinary way. Even though paragraph 2 seems to be embedded inside paragraph 3 in the screen shot, the code clearly shows that this isn’t the case. The two paragraphs are completely separate.

I added a black border to each paragraph so you can see that the size of the element isn’t always what you’d expect.

Adjusting the width

When you float an element, the behavior of succeeding elements is highly dependent on the width of the first element. This leads to a primary principle of float-based layout:

If you float an element, you must also define its width.

The exception to this rule is elements with a predefined width, such as images and many form elements. These elements already have an implicit width, so you don’t need to define width in the CSS. If in doubt, try setting the width at various values until you get the layout you’re looking for.

Figure 1-5 shows the page after I adjusted the width of the floated paragraph to 50 percent of the page width.

Figure 1-5: The floated paragraph has a width of 50 percent of the page.

Things look better in Figure 1-5, but paragraph 2 still seems to be embedded inside paragraph 3. The only significant change is in the CSS style:

I’ve added a width property to the floated element.

Elements that have the float attribute enabled will generally also have a width defined, except for images or other elements with an inherent width.

When you use a percentage value in the context of width, you’re expressing a percentage of the parent element (in this case, the body because the paragraph is embedded in the document body). Setting the width to 50% means I want this paragraph to span half the width of the document body.

Setting the next margin

Things still don’t look quite right. I added the borders around each paragraph so you can see an important characteristic of floating elements. Even though the text of paragraph 3 wraps to the right of paragraph 2, the actual paragraph element still extends all the way to the left side of the page. The element doesn’t necessarily flow around the floated element, but its contents do. The background color and border of paragraph