Float & Alignment

ON THIS PAGE

Properties List
Notes

The CSS properties in the table below can be used to define how various components on your web page are floated and aligned. These properties are typically applied to block elements but you can also apply them to images (text-align excluded) and some form elements. These include the following:

body, p, div, blockquote, table, td, ul, ol, li, form, input, textarea, select,

CSS Properties List 6 - Float & Alignment

Property Name	Some Possible Values	What It Does
float	left \| right	Aligns block element
text-align	left \| center \| right \| justify	Aligns text

NOTES:

Float ~ The float property can be used to align an entire block element to the left or right such that other content flows around it. It works exactly the same way as the HTML align attribute applies to the img element. Hence, if a block element is floated to the left, content will flow along its right side. Conversely, if the block element is floated to the right, content will flow along its left side. Naturally, the width of the floated element will have to be set smaller than that of its container in order to see the float in effect.

Here are some examples:

Example 1 - LEFT FLOAT

<--This block element is floated to the left. Its width is set to 35%.
The red box is a block element which contains this text and another smaller block element which is floated to the left (green box). This text flows along the right side of the green box and will continue as such until reaching the bottom of the green box at which point the text will run the entire width of the red box.

Example 1 - LEFT FLOAT

<div> <div style="float: left; width: 35%;"> This div is floated left. </div> This text flows along the right side of the floated div... </div>

Example 1 - RIGHT FLOAT

This block element is floated to the right. Its width is set to 35%. -->
The red box is a block element which contains this text and another smaller block element which is floated to the right (green box). This text flows along the left side of the green box and will continue as such until reaching the bottom of the green box at which point the text will run the entire width of the red box.

Example 1 - RIGHT FLOAT

<div> <div style="float: right; width: 35%;"> This div is floated right. </div> This text flows along the left side of the floated div... </div>
Text-align ~ You can use the text-align property to define whether the content of a block element is aligned to the left, right, in the center or justified to both margins. The content typically refers to text but can also apply to images and other block elements (the latter applies to Internet Explorer only). This essentially replaces the align attribute in HTML as it applies to positioning the content of a block element. The value can be one of the following:
- left - The text is aligned to the left.
- center - The text is aligned in the center.
- right - The text is aligned to the right.
- justify - The text is aligned to both the left and right.
Example: text-align: justify;

[NOTE: If you're still unclear what 'justified' means then the text on this web page can serve as an example. Notice how it is aligned (squared off) on both the left and right sides.]

* * *

So, are you tired of having underlining on your hyperlinks? The next page will show you (among other things) how to remove the underlining on your hyperlink text...

MORE CSS PROPERTIES: