CSS Float



CSS Tutorial  >  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.

Next: CSS Clear




Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy