HTML CSS Float Tutorial

http://www.htmlrookie.com

A float is contained in the HTML tag that it is declared within. For example, this image is declared within a paragraph tag and floated to the right with wrap around text. The image and text are both part of the same paragraph.

Click HERE to see it.

EXAMPLE
<HEAD>
    <STYLE TYPE="text/css">

        <!--

            .floatright { float: right; }

        -->

    </STYLE>
</HEAD>

<BODY>

    <P> <IMG CLASS="floatright" SRC="" HEIGHT="" WIDTH="" > </P>

</BODY>

.floatright is a CSS class. Its' name is arbitrary, so classes may be named anything that you prefer.

The principle is the same for floating text.

EXAMPLE
<HEAD>
    <STYLE TYPE="text/css">
              
         .floatleft { float: left; BACKGROUND-COLOR: #CCCCCC; }
    
    </STYLE>

</HEAD>

<BODY>

<P><H1 CLASS="floatleft">HTML</H1></P>

</BODY>

Here is the result.

HTML

Set the image or text margin with this code between the STYLE tags

 
{margin: 5px 5px 5px 5px;}

All margins are set to FIVE pixels and it is read clockwise, top, right, bottom and left margins.

This header is simply a part of this paragraph you are reading. It is a separate HTML tag within another HTML tag.

This header is simply a part of this paragraph you are reading. It is a separate HTML tag within another HTML tag. The text you are reading floats around the header. The header is floated to the left of the page and the paragraph follows. Try doing this with out using the CSS image Float attribute and see what the difference looks like. Keep reading to find out how you can do this with your web page. This header is simply a part of this paragraph you are reading. It is a separate HTML tag within another HTML tag. The text you are reading floats around the header. The header is floated to the left of the page and the paragraph follows. Try doing this with out using the CSS image Float attribute and see what the difference looks like. Keep reading to find out how you can do this with your web page. This header is simply a part of this paragraph you are reading. It is a separate HTML tag within another HTML tag. The text you are reading floats around the header. The header is floated to the left of the page and the paragraph follows. Try doing this with out using the CSS image Float attribute and see what the difference looks like. Keep reading to find out how you can do this with your web page.