HOME
          About US
          Contact Us

CSS Float Image

Chapter - 18 : Display, Visibility Float and Transparency (CSS Float Image): (Page 2/4)


(Cotinued from previous page)

18.3- Float: This property is mostly used for the images. When the image is displayed in web page it acts as a block element with the other text and leave all the horizontal space blank.

In HTML also this property is explained in Image Alignment Chapter 5.4.

To use this space and to make page beautiful two types of Float are used. If float is defined then an element is pushed to the left or right and other elements wraps around it. If no style is defined for images and it is used with text content or any other image, then the image is displayed on a separate line.

Command in HTML:
your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text <img src='images/name.gif' alt='name of image' />

Output: Fig - 18.1
float images

To avoid this float commands are used.
float:left
float:right

The following example will show the difference.-
i) Float Left: img { float:left; } In this case, following text will flows around it from the right side and the image will be at left side.

Command in HTML: your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text, your text <img src='images/name.gif' alt='name of image' />

Output: Fig-18.2
float

(Cont......... to next page (Pg-3))

CSS Display © funandhobby.com (CSS Display)