| Click here to bookmark this site! | Home | Contact | About | Site Map |
 |
|
Quick Menu
|
CSS FLOATFloating is often used to push an image to one side or another in your document, while having the text of a paragraph wrap around it. This type of usage is commonly referred to as text wrapping and resembles what you would come across in magazines which have articles which wrap around images of various shapes and sizes. 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 and the rest is done for you. Below is an example of an image that is moved from left to right in the paragraph. CSS Styles code img.floatleft { float: left;
margin: 4px; }
img.floatright { float: right;
margin: 4px; }
HTML Code <body> <img src="filename.gif" class="floatleft"> <p>The images are contained with...</p> |
|
||||||||||||
|
Site Stats
|
<img src="filename.gif" class="floatright"> <p>This second paragraph has an...</p> </body> How it looks 
The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely. The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely.
This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content. This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content. MULTIPLE IMAGES If you wanted to float two or three images to the right, they would appear alongside one another. But if you wanted to have the next image starting on the next line below the end of the previous image, then use the CSS Clear attribute. CSS Code img.floatrightclear { float: right;
clear: right;
margin: 4px; }
HTML Code <body> <img src="sunset.gif" class="floatrightclear"> <img src="sunset.gif" class="floatrightclear"> <p>The images are appearing...</p> <p>If we had specified...</p> <p>The number of paragraphs...</p> </body> How It Looks
The images are appearing below one another because the css clear attribute was used with the value of "right". This forces all right floating items to appear below any previous right floating items. If we had specified clear:left in our CSS code, then there would be no effect on the images, and they would appear in their default pattern, next to each other, all on one line. The number of paragraphs, and the size of the paragraphs, will not effect how these images will appear. FLOATING TEXT Yep, you guessed it. We can use the float element on text as well. CSS CODE span.floattextleft{ float: left;
font-size: xx-large;
font-family: old english text mt;
}
p.floattextleft{ position:relative; top:4px;}
HTML Code <span class="floattextleft">T</span> <p class="floattextleft">his is a simple paragraph with....</p>T his is a simple paragraph with the first letter of the sentence having a float element of left assigned to it. You will notice there is two sets of code for this to work and you may be asking why? Well its simple really, have a look at the example below with out the relative positioning assigned to the paragraph tag. T his is a simple paragraph with the first letter of the sentence having a float element of left assigned to it. You will notice I have left the class="floattextleft" off this paragraph which means it is not been positioned right and it no longer aligns up flush with the letter T. That is why we have two sets of code for this to work and now you know why!!! It's a very effective way of starting the paragraphs on your web pages if you want to really jazz up the text.
|
