+- MyBB Codes (http://www.mybbcodes.com)
+-- Forum: ۞ Webmasters Resort ۞ (/forumdisplay.php?fid=30)
+--- Forum: General Categories (/forumdisplay.php?fid=32)
+---- Forum: Languages (/forumdisplay.php?fid=36)
+---- Thread: ۞ CSS Float Tutorial ۞ (/showthread.php?tid=422)
۞ CSS Float Tutorial ۞ - ghazal - 10-14-2009 05:55 AM
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
RE: ۞ CSS Float Tutorial ۞ - mikewilkinson - 10-29-2009 06:31 AM
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.
RE: ۞ CSS Float Tutorial ۞ - ghazal - 10-31-2009 02:02 AM
(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
