Using the "float" property

First Example

Floated elements are taken out of the normal flow but are still recognised as being there by other elements. If we float an element to the top left then other text will wrap around it. Only the text wraps, the background colour, any border or a background image will not wrap.

To see what your computer screen would look when using the first example of static positioning open this window

Here is the CSS code and the XHTML used to produce the layout above.

If we do not want the text to wrap around then we can use a "clear" command in the CSS coding for the paragraph i.e. p { clear: left; }

Also if you float an element after a paragraph it will only float up to a position just below the paragraph i.e. it acts as a normal block element and starts its own line.

Last updated on October 21, 2006   by Rowland Gallop     [ Close Window  ]

First Example

Second Example