MyBB Codes

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,

Code:[Highlight]

#leftfloat { 

  float:left; 

}

the following HTML,

Code:[Highlight]

<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,

SCREENSHOT:
------------
[attachment=365]

Example 2: Given the CSS declaration,

Code:[Highlight]

#rightfloat { 

  float:right; 

  width:50px; 

}

the following HTML,

Code:[Highlight]

<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,

SCREENSHOT:
---------------
[attachment=366]

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

---
Thank You

Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right .This Attibute Floating an image to the right.

(10-29-2009 06:31 AM)mikewilkinson Wrote: [ -> ]Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right .This Attibute Floating an image to the right.

Yes its true Smile

ghazal

mikewilkinson

ghazal