Tutorial 20: CSS Floats, Part I - HTML with Style | 4 | WebReference

Tutorial 20: CSS Floats, Part I - HTML with Style | 4

index123456

Tutorial 20: CSS Floats, Part I

The float property

Floats are boxes that are removed from the normal flow of the document and are moved to either the left or right of the containing block, while other text wraps around them.

Floats are created with the float property, which accepts three values: left, right and none, with none being the default.

When you set the float property for an element, you must also set the width property. This overrides the default of making the element wide enough to fit in its containing block, and sets the width to a particular length value.

Let's see how floats work; consider the following document (only the body is shown).

<BODY>
 <DIV>
  <P ID="one">This is a floating box. It is 
  not part of normal flow of the document.</P>
  <P ID="two">This is another child of the parent 
  element. Although it is <I>positioned</I> normally 
  its <I>inline content</I> (this text)
  is moved for the float.</P>
  <P ID="three">This element, also a child of the parent, 
  is only partially covered by the float. The text wraps 
  around accordingly for the first three lines, and then 
  is positioned normally.</P>
 </DIV>
</BODY>

Now let's use the float property in a style sheet and attach it to this document.

BODY {
 background: #000000;
}
DIV { 
 margin: 1em;
 padding: 1em;
 background: #00CC99;
}
P {
 margin: 1em;
}
#one {
 float: left;
 width: 40%;
 margin: 0.5em;
 background: #003399;
 border: solid thin #D7040B;
 color: #FFFFFF;
}

The diagram would look something like this:

A DIV element containing three paragraphs, the first of which is floated to the left
A DIV element containing three paragraphs, the first of which is floated to the left

What happens to floats such as the first paragraph above is this: They are completely removed from the normal document flow (similar to absolutely positioned elements), and are moved to the left or right edge of their containing block, where they are rendered next to the edge of the block. In this case, our paragraph snuggles up against the left edge of the parent DIV element's content area and squeezes itself to 40% of the width of this area.

Other block boxes are rendered as if the float did not exist at all. The difference is that all inline boxes are always rendered outside the float's margin, and are moved to the right (for a left-floating box) or left (for a right-floating box) and squeezed to fit the available space. This is the case with all of the inline text of the second paragraph in our example, and for the first three lines of the third paragraph. In a browser, our example would look something like the following:

A DIV element containing three paragraphs, the first of which is floated to the left, as rendered by browser.
A DIV element containing three paragraphs, the first of which is floated to the left, as rendered by browser.

index123456

http://www.internet.com/

Legal Notices.

URL: http://www.webreference.com/html/tutorial20/3.html

Produced by Stephanos Piperoglou
Created: March 21, 2000
Revised: March 22, 2000