CSS Float

One of the commonly-seen layout, especially in large websites displaying ads, is wrapping the text around an advertising block. This is accomplished using the float property.

The float property has three possible values: 'left', 'right', and 'none'. Let's take a look at the following examples:

Example 1: Given the CSS declaration,

#leftfloat {   float:left; }

the following HTML,

<span id="leftfloat"><img src="yp.jpg"></span>This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the left.

renders,

This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the left.

Example 2: Given the CSS declaration,

#rightfloat {   float:right;   width:50px; }

the following HTML,

<span id="rightfloat"><img src="yp.jpg"></span>This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the right.

renders,

This example illustrates how float:right affects the appearance of a block. Notice how the image "floats" to the right.

Notice the presence of the width property increases the spacing between the image and the text.

Dont Miss Another Post Connect With Us ! Enter your email address:

Tweet

Posted in: CSS Tutorial