CSS: Spacing and Areas : Page 2

Float
{float: none/left/right}
The float property lets you place an element, such as an image, to the left or right of its containing block and allows other elements, like text, to flow around it.

The value none prevents other elements from flowing around an element. Left moves an element to the left margin and allows other elements to flow to the right of it. Right moves an element to the right margin and allows other elements to flow to the left of it. When the values left and right are used, the element will be treated as a block-level element no matter what. This property is best used with images and text.

Example:

	img {float: left}

This is the Project Cool logo. If you are using a CSS-enabled browser (this does not work with Netscape 4.0), the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it.

	img {float: right}
	

This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it.

	img {float: none}
	

This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it.

Previous Page

Next Page