|
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
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
|
|